
Vue.component('cebianlan1', {  
    name: 'Cebianlan1',  
    template: `
<div >
<el-menu @select="cebianlan_handleOpen"class="el-menu-vertical-demo":collapse="data.isCollapse" @open="cebianlan_handleOpen" @close="cebianlan_handleClose"  background-color="#545c64" text-color="#fff" 
active-text-color="#ffd04b" style="height:100%" :class='data.isCollapse?"cebianlan1_div":""'>
<div v-for="(item, indexr) in data.data" >


<el-submenu v-if="item.chlid" :class="item.index+''" :index="item.index+''"  v-bind:key="item.index+''">
    <template slot="title">
        <i :class="item.icon"></i>
      <span slot="title" v-if="!data.isCollapse">{{item.name}}</span>
    </template>





     
    
    <el-menu-item-group  v-if="item.chlid" v-for="(item2, indexr2) in item.chlid"  v-bind:key="item2.index+''">
        <el-menu-item :index="item2.index+''">
        {{item2.name}} 
        </el-menu-item>
    </el-menu-item-group>
  </el-submenu>


  <el-menu-item  :class="item.index+''" v-if="!item.chlid" :index="item.index+''"  v-bind:key="item.index+''">
    <i :class="item.icon"></i>
    <span slot="title">{{item.name}}</span>
  </el-menu-item>
  
</div>



</el-menu>                                                                                                                                                                                 >
</div>
`,  
  props:{var_name:null,load_url:null,load_data:null,_key:null},
  data(){  

    return {  
        data:{
            isCollapse:false,//是否展开
            data:[]
        }
        ,
    }    

}, 
    methods: {  
        // 一级侧边栏点击触发  - 打开
        cebianlan_handleOpen:function(key=1, keyPath='null'){

            this.cebianlan_handle(key,keyPath)
        },

        cebianlan_handleClose:function(key=1, keyPath='null'){
            this.cebianlan_handle(key,keyPath)
        },
        cebianlan_handle:function(key=1, keyPath='null') {
            key=(key+'').split('-')
            new_data=this.data.data
            for (let idx=0;idx<key.length;idx++){
                select_idx=key[idx]
                new_data=new_data[select_idx]
            }
            if (this.data.click_func){
                this.data.click_func(new_data)
            }
            // dao_hang_biao_qian.data[0].content=cebianlan.val[key].name
            // console.log(key,keyPath)
            // let temp_item=this.data.data[key]
            // biaoqianye_var.add(temp_item.template,{js_lst:[temp_item.biaoqianye]},temp_item.title)
            
              },
    },  
    mounted: function () {  
        
        let _this=this
        _this.data.click_func=null
        _this.data.cebianlan_handle=function(key=1,keyPath='null'){_this.cebianlan_handle(key,keyPath)}
        //控制侧边栏展开还是收缩
        _this.data.set_isCollapse=function(){
            _this.data.isCollapse= _this.data.isCollapse?false:true
        }
        //通过 ajax获取侧边框数据 要求 服务器返回的数据格式为{'val':data} 其中data为数据
        if (_this.load_url){
            _this.data.cebianlan_get=request______({method:'get',url:_this.load_url})
            _this.data.get_init=function(){
               
        cebianlan_get({head_data:{},
            execute_lst:[
                {type:'set_val',val1:[_this.data,'data'],val2:'val'},
                {type:'func',func:_this.cebianlan_handle}
        
        ]})
            }
        }

        //通过prop传入数据 load_data
        if (_this.load_data){
            _this.data.data=_this.load_data;
            _this.cebianlan_handle()
        }
        //直接使用var_name.data=xxx 赋值传入数据
        if (_this.var_name!=null)
        {
            window[_this.var_name]=_this.data                                         //全局变量存放的对象
        }
        
    }  
} 
);
Vue.component('dao_hang_biao_qian1', {  
    name: 'DaoHangBiaoQian1',  
    template: `
<div style="width: auto;float:left;margin-left: 25px;">
<span  v-for="item in data.data" :key="item.key">{{item.content}}</span>
</div>
`,  
  props:{var_name:null,_key:null},
  data(){  

    return {  
        data:{
            data:[
                {'content':'','key':'0'}
            ],//初始化为空
        }
        ,
    }    

}, 
    methods: {  
    },  
    mounted: function () {  
        let _this=this
        if (_this.var_name!=null)
        {window[_this.var_name]=_this.data                                         //全局变量存放的对象  
 
    }
        
    }  
} 
);
Vue.component('drop_down1', {  
    name: 'DropDown1',  
    template: `
<div>
<el-dropdown @command='click'style="float:right;margin-right: 20px;">
                      <span class="el-dropdown-link">
                        {{data.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item  :command='index' v-for="(item,index) in data.items" :key="index" >{{item.content}}</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
</div>
`,  
  props:{var_name:null,load_url:null,_key:null,refresh:null,cookie_name:null},
  
  data(){  return {   
      data:{
      'name':'xxx',
      'icon':'null',
      'items':[
          // {'content':'退出登录','key':'3'},
      ]}
             
        ,
    }    

},
    methods: {  
      click:function(key){
              if (this.data.click_func){
                this.data.click_func(this.data.items[key])
              }
        }
    },
    watch:{//监听输入框的变化
    },
    mounted: function () {  
        let _this=this
        _this.data.click_func=null
        if (_this.var_name!=null)
        {window[_this.var_name]=_this.data  }                                   //全局变量存放的对象  
 
    }
        
    
} 
);



Vue.component('footer1', {  
    name: 'Footer1',  
    template: `
<div >
<el-footer style='background-color: rgb(244, 244, 245);'>
        {{data.now_time}}
    </el-footer>   
                                                                                                                                                                                            >
</div>
`,  
  props:{var_name:null,_key:null},
  data(){  

    return {  
        data:{
            now_time:'2022-12-22 12:22:33'
        }
        ,
    }    

}, 
    methods: {  
    },  
    mounted: function () {  
        
        let _this=this
        _this._t = null;
        let temp_func=function() {
            clearTimeout(_this._t); //清除定时器
            now = new Date();
            let year = now.getFullYear();
            let month = now.getMonth() + 1;
            let date = now.getDate();
            let hours = now.getHours();
            let minutes = now.getMinutes();
            let seconds = now.getSeconds();
        
            // 如果月、日、小时、分钟、秒小于10，前面添加一个'0'
            month = month < 10 ? '0' + month : month;
            date = date < 10 ? '0' + date : date;
            hours = hours < 10 ? '0' + hours : hours;
            minutes = minutes < 10 ? '0' + minutes : minutes;
            seconds = seconds < 10 ? '0' + seconds : seconds;
        
            let currentTime = year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds;
            _this.data.now_time =currentTime;
            _this._t = setTimeout(temp_func, 1000); //设定定时器，循环运行
          }
          _this._t = setTimeout(temp_func, 1000); //开始运行
        
        if (_this.var_name!=null)
        {window[_this.var_name]=_this.data                                         //全局变量存放的对象  
 
    }
        
    }  
} 
);//父组件<div @bind_data='func' _key='0'>
//    表示input值改变就会运行func({key:_key,val:改变的值})
Vue.component('lhp_text_input', {  
    name: 'LHPTextInput',  
    template: `
<div >
        <input class='lhp_text_input' type="text" v-model="data.inputText"                                                                                                                                                                                                      >
</div>
`,  
  props:{var_name:null,_key:null},
  data(){  

    return {  
        data:{
            inputText:"",//初始化为空
        }
        ,
    }    

}, 
    methods: {  
    },  
    watch:{//监听输入框的变化
        'data.inputText':function(newText){
            this.$emit('bind_data', {key:this._key,val:newText}); 
        }
    },
    mounted: function () {  
        let _this=this
            const elements = this.$refs.querySelectorAll('[lhp_tooltip]');
            elements.forEach((element) => {  
            const eeValue = element.getAttribute('ee');  
            console.log(element, eeValue);  })
        _this.data.set_val=function(data){_this.data.inputText=data}
        _this.data.clear_val=function(){_this.data.inputText=''}
        if (_this.var_name!=null)
        {window[_this.var_name]=_this.data                                         //全局变量存放的对象  
 
    }
        
    }  
} 
);



(function () {
    if (window.Colorpicker_flag==null)
    {window.Colorpicker_flag=true;
	var util = {
		css: function (elem, obj) {
			for (var i in obj) {
				elem.style[i] = obj[i];
			}
		},
		hasClass: function (elem, classN) {
			var className = elem.getAttribute("class");
			return className.indexOf(classN) != -1;
		}
	};
 
	function Colorpicker(opt) {
		if (this === window) throw `Colorpicker: Can't call a function directly`;
		this.init(opt);
	};
 
	Colorpicker.prototype = {
		init(opt ) {
			let { el, initColor = "rgb(255,0,0)", allMode = ['hex', 'rgb'], color = '' } = opt;
			// var elem = document.getElementById(el);
			var elem = el;
            console.log('opt',opt)
            elem=elem.querySelector('.edit_lhp_color_click__')
            if (elem.style.colorpicker!=null){
				
			this.is_null=true;
				return null}//以及绑定的不会再次绑定
            else(elem.style.colorpicker='set')
			if (!(elem && elem.nodeType && elem.nodeType === 1)) {
				throw `Colorpicker: not found  ID:${el}  HTMLElement,not ${{}.toString.call(el)}`;
			}
			this.Opt = {
				...opt,
				el,
				initColor,
				allMode,
				color
			}
            this.show_hex_ele=elem.parentNode.querySelector('.edit_lhp_color_text__');
			let bind_val=this.show_hex_ele.getAttribute('bind_val');
			// console.log(bind_val,'bind_val')
			this.show_hex_ele_flag=null  //如果this.show_hex_ele绑定了 变量 那么就修改变量值
			if (bind_val!=null)
			{	this.show_hex_ele_flag=false
				this.show_hex_ele_flag=bind_val.split('.')
				this.last_val=window;
				this.last_name=this.show_hex_ele_flag[this.show_hex_ele_flag.length-1];//最后一个变量的名字
				for (let ii=0;ii<this.show_hex_ele_flag.length-1;ii++){this.last_val=this.last_val[this.show_hex_ele_flag[ii]]}
			}
            this.show_color_ele=elem.parentNode.querySelector('.edit_lhp_color_color__');
            // console.log(elem)
			this.bindElem = elem; // 缁戝畾鐨勫厓绱�
			this.elem_wrap = null; // 鏈€澶栧眰瀹瑰櫒
			this.fixedBg = null; // 鎷捐壊鍣ㄥ悗闈㈠浐瀹氬畾浣嶇殑閫忔槑div 鐢ㄤ簬鐐瑰嚮闅愯棌鎷捐壊鍣�
			this.elem_colorPancel = null; // 鑹插僵闈㈡澘
			this.elem_picker = null; // 鎷捐壊鍣ㄨ壊鍧楁寜閽�
			this.elem_barPicker1 = null; // 棰滆壊鏉�
			this.elem_hexInput = null; // 鏄剧ずhex鐨勮〃鍗�
			this.elem_showColor = null; // 鏄剧ず褰撳墠棰滆壊
			this.elem_showModeBtn = null; // 鍒囨崲杈撳叆妗嗘ā寮忔寜閽�
			this.elem_inputWrap = null; // 杈撳叆妗嗗灞傚鍣�
			this.pancelLeft = 0;
			this.pancelTop = 0;
			this.downX = 0;
			this.downY = 0;
			this.moveX = 0;
			this.moveY = 0;
			this.pointLeft = 0;
			this.pointTop = 0;
			this.current_mode = 'hex'; // input妗嗗綋鍓嶇殑妯″紡
            this.current_mode_idx=0
            this.select_current_mode=function(this_){this_.current_mode_idx++;if (this_.current_mode_idx>2){this_.current_mode_idx=0}if (this_.current_mode_idx==0){return'hex'}else if (this_.current_mode_idx==1){return'rgb'}else if(this_.current_mode_idx==2){return'cmyk'}}
			this.rgba = { r: 0, g: 0, b: 0, a: 1 };
			this.hsb = { h: 0, s: 100, b: 100 };
            this.cmyk={c:0,m:0,y:0,k:0};
			var _this = this, rgb = this.hexToRgb(this.last_val[this.last_name]);
			this.rgba.r = rgb.r;
			this.rgba.g = rgb.g;
			this.rgba.b = rgb.b;
			this.hsb=this.rgbToHsb(rgb)
			this.cmyk=this.rgbToCmyk(rgb)
			var body = document.getElementsByTagName("body")[0],
				div = document.createElement("div");
			div.innerHTML = this.render();
			body.appendChild(div);
			this.elem_wrap = div;
			this.fixedBg = div.children[0];
			this.elem_colorPancel = div.getElementsByClassName("color-pancel")[0];
			this.pancel_width = this.elem_colorPancel.offsetWidth;
			this.pancel_height = this.elem_colorPancel.offsetHeight;
			this.elem_picker = div.getElementsByClassName("pickerBtn")[0];
			this.elem_colorPalette = div.getElementsByClassName("color-palette")[0];
			this.elem_showColor = div.getElementsByClassName("colorpicker-showColor")[0];
			this.elem_barPicker1 = div.getElementsByClassName("colorBar-color-picker")[0];
			/*   this.elem_barPicker2 = div.getElementsByClassName("colorBar-opacity-picker")[0]; */
			this.elem_hexInput = div.getElementsByClassName("colorpicker-hexInput")[0];
			this.elem_showModeBtn = div.getElementsByClassName("colorpicker-showModeBtn")[0];
			this.elem_inputWrap = div.getElementsByClassName("colorpicker-inputWrap")[0];
			/*  this.elem_opacityPancel = this.elem_barPicker2.parentNode.parentNode.children[1]; */
			// var rect = this.bindElem.getBoundingClientRect();
			var elem = this.bindElem;
			var top = elem.offsetTop;
			var left = elem.offsetLeft;
			while (elem.offsetParent) {
				top += elem.offsetParent.offsetTop;
				left += elem.offsetParent.offsetLeft;
				elem = elem.offsetParent;
			}
			this.pancelLeft = left + this.elem_colorPalette.clientWidth;
			this.pancelTop = top + this.bindElem.offsetHeight;
			util.css(div, {
				"position": "absolute",
				"z-index": 9999,
				"display": 'none',
				"left": left + "px",
				"top": top + this.bindElem.offsetHeight + "px"
			});
			this.bindMove(this.elem_colorPancel, this.setPosition, true);
			this.bindMove(this.elem_barPicker1.parentNode, this.setBar, false);
			/*  this.bindMove(this.elem_barPicker2.parentNode,this.setBar,false); */
			this.bindElem.addEventListener("click", function () {
				_this.show();
			}, false);
			this.fixedBg.addEventListener("click", function (e) {
				_this.hide();
			}, false)
			this.elem_showModeBtn.addEventListener("click", function () {
				_this.switch_current_mode();
			}, false)
			this.elem_wrap.addEventListener("input", function (e) {
				// console.log('???')
				var target = e.target, value = target.value;
				// setColorByInput()
				_this.setColorByInput(value);
			}, false);
			this.elem_colorPalette.addEventListener("click", function (e) {
				if (e.target.tagName.toLocaleLowerCase() == "p") {
					let colorStr = e.target.style.background;
					let rgb = colorStr.slice(4, -1).split(",");
					let rgba = {
						r: parseInt(rgb[0]),
						g: parseInt(rgb[1]),
						b: parseInt(rgb[2])
					};
					console.log("^^^")
                    // console.log('rgb',rgba)
                    _this.cmyk=_this.rgbToCmyk(rgba);
                    // console.log('set+color')
                    let inputs=null;
					switch (_this.current_mode) {
						case "hex":
                            inputs = _this.elem_wrap.getElementsByTagName("input")
                            let val=_this.rgbToHex(rgba)
                            inputs[0].value="#" + val
                            // console.log('????',"#" + _this.rgbToHex(rgba),rgba)
                            // console.log('@@@我也是醉了',val)
							_this.setColorByInput(val)
							break;
						case 'rgb':
							inputs = _this.elem_wrap.getElementsByTagName("input")
							inputs[0].value = rgba.r;
							inputs[1].value = rgba.g;
							inputs[2].value = rgba.b;
							_this.setColorByInput(colorStr)
							/* 	_this.hsb = _this.rgbToHsb(rgba); */
							break;
                        
						case 'cmyk':
							inputs = _this.elem_wrap.getElementsByTagName("input")
                            
                            // console.log('????',"#" + _this.rgbToHex(rgba),rgba)
							// _this.setColorByInput("#" + _this.rgbToHex(rgba))
							inputs[0].value = _this.cmyk.c;
							inputs[1].value = _this.cmyk.m;
							inputs[2].value = _this.cmyk.y;
							inputs[3].value = _this.cmyk.k;
							_this.setColorByInput(colorStr)
							// _this.setColorByInput("#" + _this.rgbToHex(_this.CmykToRgb(rgba)))
							/* 	_this.hsb = _this.rgbToHsb(rgba); */
							break;
					}
				}
			}, false);
			(color != '' && this.setColorByInput(color));
            // this.show()
		},
		render: function () {
			var tpl =
				`<div style="position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px;"></div>
				<div style="position: inherit;z-index: 100;display: flex;box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 4px 8px;">
					<div style='width:180px;padding:10px;background: #f9f9f9;display: flex;flex-flow: row wrap;align-content: space-around;justify-content: space-around;' class='color-palette'>
						${this.getPaletteColorsItem()}
					</div>
					<div class="colorpicker-pancel" style="background: rgb(255, 255, 255);box-sizing: initial; width: 225px; font-family: Menlo;">
						<div style="width: 100%; padding-bottom: 55%; position: relative; border-radius: 2px 2px 0px 0px; overflow: hidden;">
							<div class="color-pancel" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: rgb(${this.rgba.r},${this.rgba.g},${this.rgba.b})">
								<style>
									.saturation-white {background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0));background: linear-gradient(to right, #fff, rgba(255,255,255,0));}
									.saturation-black {background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0));background: linear-gradient(to top, #000, rgba(0,0,0,0));}
								</style>
								<div class="saturation-white" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;">
									<div class="saturation-black" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;">
									</div>
									<div class="pickerBtn" style="position: absolute; top: 0%; left: 100%; cursor: default;">
										<div style="width: 12px; height: 12px; border-radius: 6px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px inset; transform: translate(-6px, -6px);">
										</div>
									</div>
								</div>
							</div>
						</div>
						<div style="padding: 0 16px 20px;">
							<div class="flexbox-fix" style="display: flex;align-items: center;height: 40px;">
								<div style="width: 32px;">
									<div style="width: 16px; height: 16px; border-radius: 8px; position: relative; overflow: hidden;">
										<div class="colorpicker-showColor" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; background:rgb(${this.rgba.r},${this.rgba.g},${this.rgba.b}); z-index: 2;"></div>
										<div class="" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: url(&quot;&quot;) left center;"></div>
									</div>
								</div>
								<div style="-webkit-box-flex: 1; flex: 1 1 0%;"><div style="height: 10px; position: relative;">
									<div style="position: absolute; top: 0px;right: 0px; bottom: 0px; left: 0px;">
										<div class="hue-horizontal" style="padding: 0px 2px; position: relative; height: 100%;">
											<style>
												.hue-horizontal {background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);background: -webkit-linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);}
												.hue-vertical {background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,#0ff 50%, #00f 67%, #f0f 83%, #f00 100%);background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,#0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);}
											</style>
											<div  class="colorBar-color-picker" style="position: absolute; left: 0%;">
												<div style="width: 12px; height: 12px; border-radius: 6px; transform: translate(-6px, -1px); background-color: rgb(248, 248, 248); box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;">
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="flexbox-fix" style="display: flex;">
							<div class="flexbox-fix colorpicker-inputWrap" style="-webkit-box-flex: 1; flex: 1 1 0%; display: flex; margin-left: -6px;">
									${this.getInputTpl()}
							</div>
							<div class="colorpicker-showModeBtn" style="width: 32px; text-align: right; position: relative;">
								<div style="margin-right: -4px;  cursor: pointer; position: relative;">
									<svg viewBox="0 0 24 24" style="width: 24px; height: 24px; border: 1px solid transparent; border-radius: 5px;"><path fill="#333" d="M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z"></path><path fill="#333" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15Z"></path></svg>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>`;
			return tpl;
		},
		getInputTpl: function () {
			var current_mode_html = "";
			switch (this.current_mode) {
				case 'hex':
					var hex = "#" + this.rgbToHex(this.HSBToRGB(this.hsb));
					current_mode_html += `
							<div style="padding-left: 6px; width: 100%;">
								<div style="position: relative;">
									<input class="colorpicker-hexInput" value="${hex}" spellcheck="false" style="font-size: 11px; color: rgb(51, 51, 51); width: 100%; border-radius: 2px; border: none; box-shadow: rgb(218, 218, 218) 0px 0px 0px 1px inset; height: 21px; text-align: center;">
									<span style="text-transform: uppercase; font-size: 11px; line-height: 11px; color: rgb(150, 150, 150); text-align: center; display: block; margin-top: 12px;">HEX</span>
								</div>
							</div>`;
					break;
				case 'rgb':
					for (var i = 0; i < 3; i++) {
						current_mode_html +=
							`<div style="padding-left: 6px; width: 100%;">
								<div style="position: relative;">
									<input class="colorpicker-hexInput" value="${this.rgba['rgb'[i]]}" spellcheck="false" style="font-size: 11px; color: rgb(51, 51, 51); width: 100%; border-radius: 2px; border: none; box-shadow: rgb(218, 218, 218) 0px 0px 0px 1px inset; height: 21px; text-align: center;">
									<span style="text-transform: uppercase; font-size: 11px; line-height: 11px; color: rgb(150, 150, 150); text-align: center; display: block; margin-top: 12px;">${'RGB'[i]}</span>
								</div>
							</div>`;
					}
					break;
				case 'cmyk':
                    
                    // console.log('set+color',this.rgba)
                    this.cmyk=this.rgbToCmyk(this.rgba);
                    // console.log('new_cmky:',this.cmyk)
					for (var i = 0; i < 4; i++) {
						current_mode_html +=`
                        <div style="padding-left: 6px; width: 100%;">
                            <div style="position: relative;">
                                <input class="colorpicker-hexInput" value="${this.cmyk['cmyk'[i]]}" spellcheck="false" style="font-size: 11px; color: rgb(51, 51, 51); width: 100%; border-radius: 2px; border: none; box-shadow: rgb(218, 218, 218) 0px 0px 0px 1px inset; height: 21px; text-align: center;">
                                <span style="text-transform: uppercase; font-size: 11px; line-height: 11px; color: rgb(150, 150, 150); text-align: center; display: block; margin-top: 12px;">${'CMYK'[i]}</span>
                            </div>
                        </div>`;
					}
				default:
			}
			return current_mode_html;
		},
		getPaletteColorsItem: function () {
			let str = '';
			let palette = ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)",
				"rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)",
				"rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)", "rgb(230, 184, 175)", "rgb(244, 204, 204)",
				"rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)",
				"rgb(217, 210, 233)", "rgb(234, 209, 220)", "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)",
				"rgb(182, 215, 168)", "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)"]
			palette.forEach(item => str += `<p style='width:20px;height:20px;background:${item};margin:0 5px;border: solid 1px #d0d0d0;'></p>`)
			return str;
		},
		setPosition(x, y) {
			var LEFT = parseInt(x - this.pancelLeft),
				TOP = parseInt(y - this.pancelTop);
			this.pointLeft = Math.max(0, Math.min(LEFT, this.pancel_width));
			this.pointTop = Math.max(0, Math.min(TOP, this.pancel_height));
			util.css(this.elem_picker, {
				left: this.pointLeft + "px",
				top: this.pointTop + "px"
			})
			this.hsb.s = parseInt(100 * this.pointLeft / this.pancel_width);
			this.hsb.b = parseInt(100 * (this.pancel_height - this.pointTop) / this.pancel_height);
			this.setShowColor();
			console.log('setposition')
			this.setValue(this.rgba);
		},
		setBar: function (elem, x) {
			var elem_bar = elem.getElementsByTagName("div")[0],
				rect = elem.getBoundingClientRect(),
				elem_width = elem.offsetWidth,
				X = Math.max(0, Math.min(x - rect.x, elem_width));
			if (elem_bar === this.elem_barPicker1) {
				util.css(elem_bar, {
					left: X + "px"
				});
				this.hsb.h = parseInt(360 * X / elem_width);
			} else {
				util.css(elem_bar, {
					left: X + "px"
				});
				this.rgba.a = X / elem_width;
			}
			this.setPancelColor(this.hsb.h);
			this.setShowColor();
			console.log('setBar')
			this.setValue(this.rgba);
		},
		setPancelColor: function (h) {
			var rgb = this.HSBToRGB({ h: h, s: 100, b: 100 });
			util.css(this.elem_colorPancel, {
				background: 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + this.rgba.a + ')'
			});
		},
		setShowColor: function () {
			var rgb = this.HSBToRGB(this.hsb);
			this.rgba.r = rgb.r;
			this.rgba.g = rgb.g;
			this.rgba.b = rgb.b;
			util.css(this.elem_showColor, {
				background: 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + this.rgba.a + ')'
			});
		},
        set_hex_and_color:function(hex){
            //设置显示#ffffff
			if (this.show_hex_ele_flag!=null){
				// console.log(this.show_hex_ele_flag,'this.show_hex_ele_flag')
                let data___=window;               //获取变量地址
                let last_name=this.show_hex_ele_flag[this.show_hex_ele_flag.length-1];//最后一个变量的名字
                for (let ii=0;ii<this.show_hex_ele_flag.length-1;ii++){data___=data___[this.show_hex_ele_flag[ii]]}
				data___[last_name]=hex
			}
			// console.log('hexxx',hex)
			this.show_hex_ele.innerHTML=hex;
            //设置显示颜色
            util.css(this.show_color_ele, {
				'background-color':hex
			});
            
            this.getValue(hex)
        },
        
		set_val: function (hex_color=null) {
			// console.log('showwwww')
            if (hex_color!=null){
                this.rgb=this.hexToRgb(hex_color)
                this.hsb=this.rgbToHsb(this.rgb)
                this.cmyk=this.rgbToCmyk(this.rgb)
                switch (this.current_mode) {
                    case "hex":
                        inputs = this.elem_wrap.getElementsByTagName("input")
                        inputs[0].value=hex_color
                        // console.log('????',"#" + _this.rgbToHex(rgba),rgba)
                        // console.log('@@@我也是醉了',val)
                        break;
                    case 'rgb':
                        inputs = this.elem_wrap.getElementsByTagName("input")
                        inputs[0].value = this.rgb.r;
                        inputs[1].value = this.rgb.g;
                        inputs[2].value = this.rgb.b;
                        /* 	_this.hsb = _this.rgbToHsb(rgba); */
                        break;
                    
                    case 'cmyk':
                        inputs = this.elem_wrap.getElementsByTagName("input")
                        
                        // console.log('????',"#" + _this.rgbToHex(rgba),rgba)
                        // _this.setColorByInput("#" + _this.rgbToHex(rgba))
                        inputs[0].value = this.cmyk.c;
                        inputs[1].value = this.cmyk.m;
                        inputs[2].value = this.cmyk.y;
                        inputs[3].value = this.cmyk.k;
                        // _this.setColorByInput("#" + _this.rgbToHex(_this.CmykToRgb(rgba)))
                        /* 	_this.hsb = _this.rgbToHsb(rgba); */
                        break;
                }
                this.changeViewByHsb()
                
            }
		},
		setValue: function (rgb) {
			var hex = "#" + this.rgbToHex(rgb);
			this.elem_inputWrap.innerHTML = this.getInputTpl();
            this.set_hex_and_color(hex)
            
		},
        getValue:function(val){
            if (this.get_func!=null)this.get_func(val)
        },
		setColorByInput: function (value) {
			// console.log('byinput',value)
			var _this = this;
			switch (this.current_mode) {
				case "hex":
					if (value.length == 3) {
						value = '#' + value[0] + value[0] + value[1] + value[1] + value[2] + value[2];
						this.hsb = this.hexToHsb(value);
					} else if (value.length == 6) {
						this.hsb = this.hexToHsb(value);
					}
					// console.log('???')
                    this.rgb=this.hexToRgb(value)
					this.hsb=this.rgbToHsb(this.rgb)
					// console.log('testttrgb',this.rgb)
					this.rgba.r=this.rgb.r
					this.rgba.g=this.rgb.g
					this.rgba.b=this.rgb.b
					this.cmyk=this.rgbToCmyk(this.rgb)
					// this.hsb = this.rgbToHsb(rgb);
					break;
				case 'rgb':
					var inputs = this.elem_wrap.getElementsByTagName("input"),
						rgb = {
							r: inputs[0].value ? parseInt(inputs[0].value) : 0,
							g: inputs[1].value ? parseInt(inputs[1].value) : 0,
							b: inputs[2].value ? parseInt(inputs[2].value) : 0
						};
					this.hsb = this.rgbToHsb(rgb);
                    this.rgb=rgb
					this.rgba.r=this.rgb.r
					this.rgba.g=this.rgb.g
					this.rgba.b=this.rgb.b
					this.cmyk=this.rgbToCmyk(this.rgb)
                    break;
                case 'cmyk':
					var inputs = this.elem_wrap.getElementsByTagName("input")
					this.cmyk={
                        c: inputs[0].value ? parseFloat(inputs[0].value) : 0,
                        m: inputs[1].value ? parseFloat(inputs[1].value) : 0,
                        y: inputs[2].value ? parseFloat(inputs[2].value) : 0,
                        k: inputs[3].value ? parseFloat(inputs[3].value) : 0
                    }
                    rgb=this.CmykToRgb(this.cmyk)
					this.rgba.r=this.rgb.r
					this.rgba.g=this.rgb.g
					this.rgba.b=this.rgb.b
					this.hsb = this.rgbToHsb(rgb);
					break;

			}
            // console.log(this.hsb)
			this.changeViewByHsb();
		},
		changeViewByHsb: function () {
			// console.log('changeviewbyhsb')
			this.pointLeft = parseInt(this.hsb.s * this.pancel_width / 100);
			this.pointTop = parseInt((100 - this.hsb.b) * this.pancel_height / 100);
			util.css(this.elem_picker, {
				left: this.pointLeft + "px",
				top: this.pointTop + "px"
			});
            
                    // console.log('this.pointLeft + "px"',this.pointLeft + "px")
			this.setPancelColor(this.hsb.h);
			this.setShowColor();
			util.css(this.elem_barPicker1, {
				left: this.hsb.h / 360 * (this.elem_barPicker1.parentNode.offsetWidth) + "px"
			});
			var hex = '#' + this.rgbToHex(this.HSBToRGB(this.hsb));
            this.set_hex_and_color(hex)
		},
		switch_current_mode: function () {
            var _this=this;
			this.current_mode = this.select_current_mode(_this);//'hex' ,'rgb','cmyk';
			this.elem_inputWrap.innerHTML = this.getInputTpl();
		},
		bindMove: function (elem, fn, bool) {
			var _this = this;
			elem.addEventListener("mousedown", function (e) {
				_this.downX = e.pageX;
				_this.downY = e.pageY;
				bool ? fn.call(_this, _this.downX, _this.downY) : fn.call(_this, elem, _this.downX, _this.downY);
				document.addEventListener("mousemove", mousemove, false);
				function mousemove(e) {
					_this.moveX = e.pageX;
					_this.moveY = e.pageY;
                    // console.log('_this.moveX',_this.moveX)
					bool ? fn.call(_this, _this.moveX, _this.moveY) : fn.call(_this, elem, _this.moveX, _this.moveY);
					e.preventDefault();
				}
				document.addEventListener("mouseup", mouseup, false);
				function mouseup(e) {
					document.removeEventListener("mousemove", mousemove, false)
					document.removeEventListener("mouseup", mouseup, false)
				}
			}, false);
		},
		show: function (hex_color=null) {
			// console.log('showwwww')
            if (hex_color!=null){
                this.rgb=this.hexToRgb(hex_color)
                this.hsb=this.rgbToHsb(this.rgb)
                this.cmyk=this.rgbToCmyk(this.rgb)
                switch (this.current_mode) {
                    case "hex":
                        inputs = this.elem_wrap.getElementsByTagName("input")
                        inputs[0].value=hex_color
                        // console.log('????',"#" + _this.rgbToHex(rgba),rgba)
                        // console.log('@@@我也是醉了',val)
                        break;
                    case 'rgb':
                        inputs = this.elem_wrap.getElementsByTagName("input")
                        inputs[0].value = this.rgb.r;
                        inputs[1].value = this.rgb.g;
                        inputs[2].value = this.rgb.b;
                        /* 	_this.hsb = _this.rgbToHsb(rgba); */
                        break;
                    
                    case 'cmyk':
                        inputs = this.elem_wrap.getElementsByTagName("input")
                        
                        // console.log('????',"#" + _this.rgbToHex(rgba),rgba)
                        // _this.setColorByInput("#" + _this.rgbToHex(rgba))
                        inputs[0].value = this.cmyk.c;
                        inputs[1].value = this.cmyk.m;
                        inputs[2].value = this.cmyk.y;
                        inputs[3].value = this.cmyk.k;
                        // _this.setColorByInput("#" + _this.rgbToHex(_this.CmykToRgb(rgba)))
                        /* 	_this.hsb = _this.rgbToHsb(rgba); */
                        break;
                }
                this.changeViewByHsb()
                
            }
			util.css(this.elem_wrap, {
				"display": "block"
			})
		},
		hide: function () {
			util.css(this.elem_wrap, {
				"display": "none"
			})
		},
		HSBToRGB: function (hsb) {
			var rgb = {};
			var h = Math.round(hsb.h);
			var s = Math.round(hsb.s * 255 / 100);
			var v = Math.round(hsb.b * 255 / 100);
			if (s == 0) {
				rgb.r = rgb.g = rgb.b = v;
			} else {
				var t1 = v;
				var t2 = (255 - s) * v / 255;
				var t3 = (t1 - t2) * (h % 60) / 60;
				if (h == 360) h = 0;
				if (h < 60) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3 }
				else if (h < 120) { rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3 }
				else if (h < 180) { rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3 }
				else if (h < 240) { rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3 }
				else if (h < 300) { rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3 }
				else if (h < 360) { rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3 }
				else { rgb.r = 0; rgb.g = 0; rgb.b = 0 }
			}
			return { r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b) };
		},
		rgbToHex: function (rgb) {
			var hex = [
				rgb.r.toString(16),
				rgb.g.toString(16),
				rgb.b.toString(16)
			];
			hex.map(function (str, i) {
				if (str.length == 1) {
					hex[i] = '0' + str;
				}
			});
			return hex.join('');
		},
         CmykToRgb:function(cmyk) {
            let c=cmyk.c;
            let m=cmyk.m;
            let y=cmyk.y;
            let k=cmyk.k;
            var r, g, b;
            r = 255 * (1 - c / 100) * (1 - k / 100);
            g = 255 * (1 - m / 100) * (1 - k / 100);
            b = 255 * (1 - y / 100) * (1 - k / 100);
            return {r:Math.round(r),g: Math.round(g),b: Math.round(b)}
        },
        rgbToCmyk:function(rgb) {
            // 将RGB值转换为范围在0到1之间的小数值
            let r=rgb.r;
            let g=rgb.g;
            let b=rgb.b;
            var c = r / 255;
            var m = g / 255;
            var y = b / 255;
            // 计算出CMY值
            var k = Math.min(1 - c, 1 - m,1 - y);
            if (c === 0 && m === 0 && y === 0) {
                // 如果RGB都为0，直接返回0
                return {c: 0, m: 0, y: 0, k: k};
            }
            var cmy = [(1 - c - k) / (1 - k), (1 - m - k) / (1 - k), (1 - y - k) / (1 - k), k];
            // 将CMY值转换为范围在0到100之间的整数值
            var cmyk = cmy.map(function(value) {
              return (value * 100).toFixed(2);
            });
            
            return {c:cmyk[0],m:cmyk[1],y:cmyk[2],k:cmyk[3]};
          },
		hexToRgb: function (hex) {
			var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
			let res={ r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF) };
            // console.log('#####11111 hex to rgb',res,'########')
            return res
		},
		hexToHsb: function (hex) {
			return this.rgbToHsb(this.hexToRgb(hex));
		},
		rgbToHsb: function (rgb) {
			var hsb = { h: 0, s: 0, b: 0 };
			var min = Math.min(rgb.r, rgb.g, rgb.b);
			var max = Math.max(rgb.r, rgb.g, rgb.b);
			var delta = max - min;
			hsb.b = max;
			hsb.s = max != 0 ? 255 * delta / max : 0;
			if (hsb.s != 0) {
				if (rgb.r == max) hsb.h = (rgb.g - rgb.b) / delta;
				else if (rgb.g == max) hsb.h = 2 + (rgb.b - rgb.r) / delta;
				else hsb.h = 4 + (rgb.r - rgb.g) / delta;
			} else hsb.h = -1;
			hsb.h *= 60;
			if (hsb.h < 0) hsb.h += 360;
			hsb.s *= 100 / 255;
			hsb.b *= 100 / 255;
            // console.log('#####2222222222 hex to rgb',hsb,'########')
			return hsb;
		}
	}
	Colorpicker.create = function (opt) {
		return new Colorpicker(opt)
	}
	window.Colorpicker = Colorpicker;

}})()
window.data={inputText:"44"}
//父组件<div @bind_data='func' _key='0'>
//    表示input值改变就会运行func({key:_key,val:改变的值})
Vue.component('edit_lhp_color', {  
    name: 'EditLhpColor',  
    template: `
  <div class='edit_lhp_color_div'>
    <div class="edit_lhp_color_text__" style="margin-left: 10px;width:100px" bind_val="data.inputText">{{data.inputText}}</div>
    <div class="edit_lhp_color_color__" :style="{'background-color': data.inputText}"></div>
    <div class="edit_lhp_color_click__">{{data.选择颜色}}</div>
</div>
`,  
  props:{var_name:null,text_选择颜色:null,_key:null},
  data(){  

    return {  
        data:{
			选择颜色:'选择颜色',
            inputText:"",//初始化为空
        }
        ,
    }    

}, 
    methods: {  
    },  
    watch:{//监听输入框的变化
        'data.inputText':function(newText){
            this.$emit('bind_data', {key:this._key,val:newText}); 
        }
    },
    mounted: function () {  
        let _this=this
		if (_this.text_选择颜色)_this.data.选择颜色=_this.text_选择颜色
        //当前dom对象
        console.log('this.$el',this.$el)
        _this.data.colorpicker_obj=Colorpicker.create({
            el: this.$el, //当前节点对象
            color: "#000fff", //默认颜色
          })
        _this.data.clear_val=function(){
            _this.data.colorpicker_obj.set_val('#fff000')
        }

        _this.data.colorpicker_obj.get_func=function(val){_this.data.inputText=val}
        _this.data.set_val=function(data){_this.data.colorpicker_obj.set_val(data)}
        _this.data.clear_val()
        if (_this.var_name!=null)
        {window[_this.var_name]=_this.data                                         //全局变量存放的对象  
 
    }
        
    }  
} 
);


//父组件<div @bind_data='func' _key='0'>
//    表示input值改变就会运行func({key:_key,val:改变的值})
Vue.component('edit_lhp_img', {  
    name: 'EditLhpImg',  
    template: `
    <div>
    <div class="edit_lhp_img" ref="img" @click="up_img">+</div>  
   </div>
`,  
  props:{var_name:null,_key:null},
  data(){  

    return {  
        data:{
            fromdata:null,//初始化为空
        }
        ,
    }    

}, 
    methods: {  
        up_img:function(){
    let _this=this;
    // 打开文件选择对话框  
    var fileInput = document.createElement("input");  
    fileInput.type = "file";  
    fileInput.accept = "image/jpeg";  
    fileInput.addEventListener("change", function () {  
    // 获取选择的文件  
    var file = fileInput.files[0];  
    // 创建一个 FileReader 对象  
    var reader = new FileReader();  
    // 读取文件完成后执行回调函数  
    reader.onload = function (e) {  
    // 将图片数据存储到变量中  
    var imageData = e.target.result;  
     _this.data.fromdata=imageData;
     _this.$emit('bind_data', {key:_this._key,val:imageData}); 
    //显示图片
    _this.data.change_img(imageData)
    }  
        
        reader.readAsDataURL(file);  
    })

    fileInput.click();  
}}
    ,  
    mounted: function () {  
        let _this=this
        _this.data.set_val=function(data){_this.data.val=data}
        _this.data.clear_val=function(){_this.data.fromdata =null,_this.$refs['img'].style.backgroundImage=null}
        _this.data.$refs=function(){return _this.$refs};
        _this.data.change_img=function(src){
            _this.$refs['img'].style.backgroundImage = "url('" + src + "')";  
        }
        if (_this.var_name!=null)
        {window[_this.var_name]=_this.data                                         //全局变量存放的对象  
 
    }
        
    }  
} 
);

//父组件<div @bind_data='func' _key='0'>
//    表示input值改变就会运行func({key:_key,val:改变的值})
Vue.component('edit_lhp_search_text2', {  
    name: 'EditLhpSearchText2',  
    template: `
<div>
        <input class='edit_lhp_search_text2_input' type="text" v-model="data.inputText" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
        <table class='edit_lhp_search_text2_table'border="1" cellspacing="0" v-if='data.show' @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
            <table>
                <li class='edit_lhp_search_text2_li' v-for="data in data.newDatalist" @click="goPage(data)">
                    {{data.name}}
                </li>
            </table>
        </table>
</div>
`,  
  props:{var_name:null,load_url:null,load_json:null,load_db_name:null,_key:null,name:null,head_data:null},
  data(){  

    return {  
        data:{
            dct:null,
            dct2:null,
            show:false,
            id:'',
            name:'',
            inputText:"",//初始化为空
            datalist:[],
                // {id:'1',name:"热爱计算机"},
                // {id:'2',name:"热爱数据结构"},
                // {id:'3',name:"热爱生活"},
                // {id:'4',name:"腾讯"},
                // {id:'5',name:"大家好!Good morning!"},
                // {id:'6',name:"oy is studying very hard"},
                // {id:'7',name:"Tencent oye!"},
                // {id:'8',name:"好好学习"},
                // {id:'9',name:"好好吃饭"},
                // {id:'10',name:"好好运动"},
                // {id:'11',name:"好好做人"},
                // {id:'12',name:"赶紧好好写AI方案"}],	//原始数据
            newDatalist:[]
            
        }
        ,
    }    

}, 
    methods: {  
        handleMouseEnter(event) {  
            if (this.data.show!=true)this.data.show=true;
          },  
      
          handleMouseLeave(event) {  
            if (this.data.show!=false)this.data.show=false;
          } ,
            goPage:function(data){
                this.data.inputText=data.name;
                this.data.id=data.id
                if (this.data.show!=false)this.data.show=false;
            },
        _setdatalist:function(newText){
            function next(str) {
                var prefix = [];
                var suffix = [];
                var partMatch;
                var i = str.length
                var newStr = str.substring(0, i + 1);
                for (var k = 0; k < i; k++) {
                    //取前缀
                    prefix[k] = newStr.slice(0, k + 1);
                    suffix[k] = newStr.slice(-k - 1);
                    if (prefix[k] === suffix[k]) {
                        partMatch = prefix[k].length;
                    }
                }
                if (!partMatch) {
                    partMatch = 0;
                }
                return partMatch;
            }
            function KMP(sourceStr, searchStr) {
                var sourceLength = sourceStr.length;
                var searchLength = searchStr.length;
                var result;
                var i = 0;
                var j = 0;
                for (; i < sourceStr.length; i++) { //最外层循环，主串
                    //子循环
                    for (var j = 0; j < searchLength; j++) {
                        //如果与主串匹配
                        if (searchStr.charAt(j) === sourceStr.charAt(i)) {
                            //如果是匹配完成
                            if (j === searchLength - 1) {
                                result = i - j;
                                break;
                            } else {
                                //如果匹配到了，就继续循环，i++是用来增加主串的下标位
                                i++;
                            }
                        } else {
                            if (j > 1) {
                                i += i - next(searchStr.slice(0, j));
                            } else {
                                //移动一位
                                i = (i - j)
                            }
                            break;
                        }
                    }
                    if (result || result === 0) {
                        break;
                    }
                }
                if (result || result === 0) {
                    return result
                } else {
                    return -1;
                }
            }
            function BF(sourceStr,searchStr){
               var i=0;
               var j=0;
               var start=0;
               while(i<sourceStr.length&&j<searchStr.length)
               {
                   if(sourceStr[i]===searchStr[j])
                   {
                       i++;
                       j++;
                   }
                   else{
                       start++;
                       i=start;
                       j=0;
                   }
               }
               if(j===searchStr.length){return start+1;}
               else{return -1;}
            }
            if(newText.length>0){
                this.data.newDatalist.splice(0,this.data.newDatalist.length);//清空之前数组
                for(let value of this.data.datalist){
                    if(KMP(value.name,newText)>-1){// 可以直接用indexOf(属性)
                        this.data.newDatalist.push({
                            id: value.id,
                            name :value.name
                        });//一定要加this

                    }
                }
            }else{
                this.data.newDatalist=JSON.parse(JSON.stringify(this.data.datalist));//输入框为空，等于原始数据
            }
            this.$emit('bind_data', {key:this._key,val:this.data.dct[newText]}); 
        },
        set_datalist_all:function(){
            this.data.newDatalist=JSON.parse(JSON.stringify(this.data.datalist));
        }
    },  
    watch:{//监听输入框的变化
        'data.inputText':function(newText){
            this._setdatalist(newText)
        }
    },
    mounted: function () {  
        let _this=this
        if ( typeof _this.head_data === 'string'){_this.head_data=JSON.parse(_this.head_data);console.log('dsafsa typeof _this.head_data)',typeof _this.head_data)}
        
        if (_this.load_json){
            _this.data.dct=JSON.parse(_this.load_json);
            _this.data.dct2 = {};  
            // 使用Object.entries()  
            for(let key in _this.data.dct){
                _this.data.dct2[_this.data.dct[key]]=key
            }
            _this.data.datalist=[]
            for (let nnname in _this.data.dct){

                _this.data.datalist.push({'name':nnname})
            }
            _this.set_datalist_all();
            }
        _this.data.set_val=function(data){
            if (typeof data === 'string') {  } else {  data = JSON.stringify(data);  }  
            _this.data.inputText=_this.data.dct2[data]
        
        }
        _this.data.clear_val=function(){
            _this.data.inputText=''
        }
        //检查值
        _this.data.check_val=function(){
            for (key in _this.data.datalist){
                if (_this.data.datalist[key].name==_this.data.inputText)
                {
                    return {'type':true}
                }
            }
            return {'type':false,message:'输入参数 '+_this.data.inputText+' 不在可选值中'}
        }
        console.log('load_url',_this.load_url)
        if (_this.load_url){
            _this.data.get_data=request______({method:'get',url:_this.load_url});        //查找数据
            
            _this.data.get_all_by_get=function(head_data=null)                            //获取所有数据并显示
            {
                if (head_data==null)head_data=_this.head_data;
                _this.data.get_data
                ({
                    head_data:head_data,
                    execute_lst://从服务器获取到数据后 要依次执行的操作(运行函数、变量赋值)
                    [
                        {//2.修改tableData内容：浅拷贝
                            'type':'set_val',//相当于运行  window[var_name].tableData=data    //data指向的是服务器返回下来的数据received_data.data
                            'val1':[_this.data,'datalist'],//表示被浅拷贝赋值的变量 this.data.datalist
                            'val2':'data' //data指向的是服务器返回下来的数据received_data.data
                        },
                        {'type':'func',func:_this.set_datalist_all},
                    ]
                })
            }    
            //读取最新服务器数据
            _this.data.init=function(){
                _this.data.get_all_by_get()
            }
            }
        
            console.log('loadjson1',_this.load_json)
        if (_this.var_name!=null)
        {window[_this.var_name]=_this.data  
            
        console.log(`组件已挂载！eee${_this.var_name}`);  
        }
        console.log(`组件已挂载！eee${_this.var_name}`)
    // console.log('load url',_this.load_url)
        
    }  
} 
);

//父组件<div @bind_data='func' _key='0'>
//    表示input值改变就会运行func({key:_key,val:改变的值})
Vue.component('edit_lhp_search_text_list', {  
    name: 'EditLhpSearchTextList',  
    template: `
<div>
        <input class='edit_lhp_search_text_list_input' type="text" v-model="data.inputText" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
        <table class='edit_lhp_search_text_list_table'border="1" cellspacing="0" v-if='data.show' @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
            <table>
                <li class='edit_lhp_search_text_list_li' v-for="data in data.newDatalist" @click="goPage(data)">
                    {{data.name}}
                </li>
            </table>
        </table>
</div>
`,  
  props:{var_name:null,load_url:null,load_json:null,load_db_name:null,_key:null,name:null,head_data:null},
  data(){  

    return {  
        data:{
            show:false,
            id:'',
            name:'',
            inputText:"",//初始化为空
            datalist:[],
                // {id:'1',name:"热爱计算机"},
                // {id:'2',name:"热爱数据结构"},
                // {id:'3',name:"热爱生活"},
                // {id:'4',name:"腾讯"},
                // {id:'5',name:"大家好!Good morning!"},
                // {id:'6',name:"oy is studying very hard"},
                // {id:'7',name:"Tencent oye!"},
                // {id:'8',name:"好好学习"},
                // {id:'9',name:"好好吃饭"},
                // {id:'10',name:"好好运动"},
                // {id:'11',name:"好好做人"},
                // {id:'12',name:"赶紧好好写AI方案"}],	//原始数据
            newDatalist:[]
            
        }
        ,
    }    

}, 
    methods: {  
        handleMouseEnter(event) {  
            if (this.data.show!=true)this.data.show=true;
          },  
      
          handleMouseLeave(event) {  
            if (this.data.show!=false)this.data.show=false;
          } ,
            goPage:function(data){
                this.data.inputText=data.name;
                this.data.id=data.id
                if (this.data.show!=false)this.data.show=false;
            },
        _setdatalist:function(newText){
            function next(str) {
                var prefix = [];
                var suffix = [];
                var partMatch;
                var i = str.length
                var newStr = str.substring(0, i + 1);
                for (var k = 0; k < i; k++) {
                    //取前缀
                    prefix[k] = newStr.slice(0, k + 1);
                    suffix[k] = newStr.slice(-k - 1);
                    if (prefix[k] === suffix[k]) {
                        partMatch = prefix[k].length;
                    }
                }
                if (!partMatch) {
                    partMatch = 0;
                }
                return partMatch;
            }
            function KMP(sourceStr, searchStr) {
                var sourceLength = sourceStr.length;
                var searchLength = searchStr.length;
                var result;
                var i = 0;
                var j = 0;
                for (; i < sourceStr.length; i++) { //最外层循环，主串
                    //子循环
                    for (var j = 0; j < searchLength; j++) {
                        //如果与主串匹配
                        if (searchStr.charAt(j) === sourceStr.charAt(i)) {
                            //如果是匹配完成
                            if (j === searchLength - 1) {
                                result = i - j;
                                break;
                            } else {
                                //如果匹配到了，就继续循环，i++是用来增加主串的下标位
                                i++;
                            }
                        } else {
                            if (j > 1) {
                                i += i - next(searchStr.slice(0, j));
                            } else {
                                //移动一位
                                i = (i - j)
                            }
                            break;
                        }
                    }
                    if (result || result === 0) {
                        break;
                    }
                }
                if (result || result === 0) {
                    return result
                } else {
                    return -1;
                }
            }
            function BF(sourceStr,searchStr){
               var i=0;
               var j=0;
               var start=0;
               while(i<sourceStr.length&&j<searchStr.length)
               {
                   if(sourceStr[i]===searchStr[j])
                   {
                       i++;
                       j++;
                   }
                   else{
                       start++;
                       i=start;
                       j=0;
                   }
               }
               if(j===searchStr.length){return start+1;}
               else{return -1;}
            }
            if(newText.length>0){
                this.data.newDatalist.splice(0,this.data.newDatalist.length);//清空之前数组
                for(let value of this.data.datalist){
                    if(KMP(value.name,newText)>-1){// 可以直接用indexOf(属性)
                        this.data.newDatalist.push({
                            id: value.id,
                            name :value.name
                        });//一定要加this

                    }
                }
            }else{
                this.data.newDatalist=JSON.parse(JSON.stringify(this.data.datalist));//输入框为空，等于原始数据
            }
            this.$emit('bind_data', {key:this._key,val:newText}); 
        },
        set_datalist_all:function(){
            this.data.newDatalist=JSON.parse(JSON.stringify(this.data.datalist));
        }
    },  
    watch:{//监听输入框的变化
        'data.inputText':function(newText){
            this._setdatalist(newText)
        }
    },
    mounted: function () {  
        let _this=this
        if ( typeof _this.head_data === 'string'){_this.head_data=JSON.parse(_this.head_data);console.log('dsafsa typeof _this.head_data)',typeof _this.head_data)}
        this._setdatalist('')
        _this.data.set_val=function(data){
            if (typeof data === 'string') {  } else {  data = JSON.stringify(data);  }  
            _this.data.inputText=data}
        _this.data.clear_val=function(){
            _this.data.inputText=''
        }
        //检查值
        _this.data.check_val=function(){
            for (key in _this.data.datalist){
                if (_this.data.datalist[key].name==_this.data.inputText)
                {
                    return {'type':true}
                }
            }
            return {'type':false,message:'输入参数 '+_this.data.inputText+' 不在可选值中'}
        }
        if (_this.load_url){
            _this.data.get_data=request______({method:'get',url:_this.load_url});        //查找数据
            
            _this.data.get_all_by_get=function(head_data=null)                            //获取所有数据并显示
            {
                if (head_data==null)head_data=_this.head_data;
                _this.data.get_data
                ({
                    head_data:head_data,
                    execute_lst://从服务器获取到数据后 要依次执行的操作(运行函数、变量赋值)
                    [
                        {//2.修改tableData内容：浅拷贝
                            'type':'set_val',//相当于运行  window[var_name].tableData=data    //data指向的是服务器返回下来的数据received_data.data
                            'val1':[_this.data,'datalist'],//表示被浅拷贝赋值的变量 this.data.datalist
                            'val2':'data' //data指向的是服务器返回下来的数据received_data.data
                        },
                        {'type':'func',func:_this.set_datalist_all},
                    ]
                })
            }    
            //读取最新服务器数据
            _this.data.init=function(){
                _this.data.get_all_by_get()
            }
            }
        
        if (_this.load_json){
                _this.data.datalist=JSON.parse(_this.load_json);
                _this.set_datalist_all();
                }
        if (_this.var_name!=null)
        {window[_this.var_name]=_this.data  
            
        console.log(`组件已挂载！eee${_this.var_name}`);  
        }
        console.log(`组件已挂载！eee${_this.var_name}`)
    // console.log('load url',_this.load_url)
        
    }  
} 
);

//父组件<div @bind_data='func' _key='0'>
//    表示input值改变就会运行func({key:_key,val:改变的值})
Vue.component('edit_lhp_text', {  
    name: 'EditLhpText',  
    template: `
<div >
<input class='edit_lhp_text' type="text" v-model="data.inputText"                                                                                                                                                                                                      >
</div>
`,  
  props:{var_name:null,_key:null,},
  data(){  

    return {  
        data:{
            inputText:"",//初始化为空
        }
        ,
    }    

}, 
    methods: {  
    },  
    watch:{//监听输入框的变化
        'data.inputText':function(newText){
            if (typeof newText === 'string') {  } else {  newText = JSON.stringify(newText);  }  
            this.$emit('bind_data', {key:this._key,val:newText}); 
        }
    },
    mounted: function () {  
        let _this=this
        _this.data.set_val=function(data){
            
            if (typeof data === 'string') {  } else {  data = JSON.stringify(data);  }  
            _this.data.inputText=data}
        _this.data.clear_val=function(){_this.data.inputText=''}
        if (_this.var_name!=null)
        {window[_this.var_name]=_this.data                                         //全局变量存放的对象  
 
    }
        
    }  
} 
);

//父组件<div @bind_data='func' _key='0'>
//    表示input值改变就会运行func({key:_key,val:改变的值})
__lhp_labs_test={
    
}

function ____LoadJs(urle='load_js') { 
  
  this.load_js_eval_func=function(js_val){
    // console.log('#####',js_val);
    eval(js_val)}
  this.load_js_dct={};
  this.load_js_funcs={};
  let _this=this;
  _this.load_js_lst=function(body_data={'js_lst':[]},post_flag=false,url=urle,resp_val='js_val'){
  let key=url+'_'+JSON.stringify(body_data)
  // console.log('key',key)
    // url 请求的路由
  if (_this.load_js_funcs[key]==null){_this.load_js_funcs[key]=request______({method:'post',url:url})}
  if (_this.load_js_dct[key]==null || post_flag==true){
    _this.load_js_funcs[key]({body_data:body_data,
      execute_lst:[
        {
          type:'set_val',
          val1:[_this.load_js_dct,key],
          val2:resp_val
        },
        {
          type:'func',
          func:_this.load_js_eval_func,
          args:[[_this.load_js_dct,key]]
        },
      ]
    }
  )
}
else{_this.load_js_eval_func(_this.load_js_dct[key])}
}
}  
Vue.component('lhp_labs', {  
    name: 'LHPLabs',  
    template: `
<div class="lhp_labs_div">
<el-tabs v-model="data.key"  type="card" @tab-click="tab_click" closable @tab-remove="remove">
    <el-tab-pane
      v-for="(item, index) in data.tabs"
      :key="item.key"
      :label="item.title"
      :name="item.key"
      :id="item.id"
    >
    </el-tab-pane>
  </el-tabs>
</div>
`,  
  props:{var_name:null,load_url:null,_key:null,refresh:null,load_js_url:null},
  data(){  

    return {  
        data:{
            key:'0',//当前标签页的
            tabs:[],            //存储每个标签的信息
            tab_infos:{},       //存储服务器上下载下来的数据 
        }
        ,
    }    

}, 
    methods: {  
        //移除标签
        remove:function(target_key) {
            this.data.remove(target_key)
            //el-table 隐藏和消失时 会出现布局错误，需要刷新
            if (this.refresh!=null){eval(this.refresh)}
          },
          tab_click:function(a=null){
            //el-table 隐藏和消失时 会出现布局错误，需要刷新
            if (this.refresh!=null){eval(this.refresh)}
           if(this.data.click_func) {this.data.click_func(a.label)}
          },
        add:function(target_key) {
            this.data.add(target_key)
            
            }
    },
    watch:{//监听输入框的变化
    },
    mounted: function () {  
        let _this=this
        if (_this.load_js_url==null){_this.load_js_url='load_js'}
        _this.data.load_js=new ____LoadJs(_this.load_js_url); 
        _this.data.get_lab=request______({method:'post',url:_this.load_url});        //post获取动态标签数据
        //移除标签
        _this.data.remove=function(target_key){
            let tabs = _this.data.tabs;
            let active_key = _this.data.key;
            if (active_key === target_key) {
              tabs.forEach((tab, index) => {
                if (tab.key === target_key) {
                  let nextTab = tabs[index + 1] || tabs[index - 1];
                  if (nextTab) {
                    active_key = nextTab.key;
                  }
                }
              });
            }
            _this.data.key = active_key;
            _this.data.tabs = tabs.filter(tab => tab.key !== target_key);
        }
        //添加标签
        let load_cssjs=function(cssjs_lst){
            for (var i = 0; i < cssjs_lst.length; i++) {
                loadcssjs(cssjs_lst[i])
            }
        }
        let get_id=function(target_key){

            let add_str=_this.var_name;
            if (add_str==null)add_str=''

            let select_id=add_str+target_key; //标签节点id
            return select_id
        }
        let check_id=function(select_id){
            return document.getElementById(select_id)
        }
        let set_innerhtml=function(select_id,tab_info){
            let body_val=tab_info.body_val
            let js1=tab_info.js_val1
            let js2=tab_info.js_val2
            let load_js_=tab_info.load_js
            document.getElementById(select_id).innerHTML =body_val; 
            let js_val12=js1+'\n'+js2
            if (js_val12){eval(js_val12)}
            _this.data.load_js.load_js_lst(body_data=load_js_)
        }
        let eval_js_val=function(target_key){
            
          _this.data.load_js.load_js_lst(body_data=_this.data.tab_infos[target_key].load_js)

        }
        let run_ttime2=function(target_key){
            let tab_info=_this.data.tab_infos[target_key]
            let select_id=get_id(target_key)
            ttime2(check_id,set_innerhtml,[select_id],[select_id,tab_info])
        }
        _this.data.add=function(target_key,load_js_=null,title=null){
            let select_id=get_id(target_key);
            // function(targetName='',temp_name='eee',show_name='eee') {
                if (_this.data.tab_infos[target_key]==null){//判断首没有这个数据
                    if (title==null)title=target_key;
                    _this.data.tabs.push({
                        title:title,
                        key: target_key,
                        id:select_id,
                      });
                    _this.data.key = target_key;//选择该标签
                    body_data={name:target_key};
                    _this.data.get_lab({
                        body_data:body_data,
                        execute_lst://从服务器获取到数据后 要依次执行的操作(运行函数、变量赋值)
                [
                    {'type':'set_val','val1':[_this.data.tab_infos,target_key],'val2':'received_data'},
                    {'type':'set_val','val1':[_this.data.tab_infos,target_key+'.load_js'],'val2':[{'val':load_js_},'val']},
                    {'type':'func',func:load_cssjs,args:['head']},//从返回的数据中读取head相关数据并加载
                    {'type':'func',func:run_ttime2,args_:[target_key]},//从返回的数据中读取head相关数据并加载
                
                
                ]
                    })
                }else if (document.getElementById(select_id)==null)//根据节点id来判断有没有这个标签
                {
                    if (title==null)title=target_key;
                    _this.data.tabs.push({
                        title:title,
                        key: target_key,
                        id:select_id,
                      });
                    _this.data.key = target_key;//选择该标签
                    _this.data.tab_infos[target_key].load_js=load_js_;
                    run_ttime2(target_key)
                }else//存在这个标签
                {
                    _this.data.key = target_key;//选择该标签
                    _this.data.tab_infos[target_key].load_js=load_js_;
                    eval_js_val(target_key)
                      //el-table 隐藏和消失时 会出现布局错误，需要刷新
                    if (_this.refresh!=null){eval(_this.refresh)}
                }
                  
                    
                      
                    }
        _this.data.$refs=_this.$refs;
        
        if (_this.var_name!=null)
        {window[_this.var_name]=_this.data  }                                   //全局变量存放的对象  
 
    }
        
    
} 
);


Vue.component('show_lhp_number2text', {  
    name: 'ShowLhpNumber2text',  
    template: `
  <div class='show_lhp_number2text_div'>
    <span class='show_lhp_number2text_span'></span>
</div>
`,  
  props:{var_name:null,_key:null},
  data(){  

    return {  
        data:{
            inputText:"",//初始化为空
        }
        ,
    }    

}, 
    methods: {  
    },  
    mounted: function () {  
        let _this=this
        this.data.span=this.$el.parentNode.querySelector('.show_lhp_number2text_span')
        if (_this.var_name!=null)
        {window[_this.var_name]=_this.data                                         //全局变量存放的对象  
 
    }
        
    }  
} 
);


//父组件<div @bind_data='func' _key='0'>
//    表示input值改变就会运行func({key:_key,val:改变的值})

Vue.component('show_lhp_color', 
{  
    name: 'ShowLhpColor',  
    template: ` 
<div>
    <el-tag size="medium" style="float:left">{{data.val}}</el-tag>
    <div class='show_lhp_color_d2':style="{'background-color': data.val,'float':'right'}"></div>
</div>

`,  
  props:{var_name:null,_key:null,num:null},
  data() 
    {  
    return {data:
        {
            val:''
        }
    }},
    methods: 
    {  
    },

    mounted: function () {  
        let _this=this

    if (_this.var_name!=null)
    {window[_this.var_name]=_this.data  
    console.log(`组件已挂载！eee${_this.var_name}`);  
    }
}});


Vue.component('show_lhp_img', {  
    name: 'ShowLhpImg',  
    template: `
<span class='show_lhp_img_div' style='white-space: nowrap;overflow: hidden;'>
<el-image
  style="width: 100px; height: 100px"
  :src="'/static/small_img/'+data.id+'.jpg?'+data.val" 
  :preview-src-list="['/static/big_img/'+data.id+'.jpg?'+data.val]">
</el-image>
</span>
`,  
  props:{var_name:null,_key:null},
  data(){  

    return {  
        data:{
            id:1,
            val:0
        }
        ,
    }    

}, 
    methods: {  
    },  
    mounted: function () {  
        let _this=this
        this.data.span=this.$el.parentNode.querySelector('.show_lhp_text_span')
        if (_this.var_name!=null)
        {window[_this.var_name]=_this.data                                         //全局变量存放的对象  
 
    }
        
    }  
} 
);


window.show_lhp_line_class=function(obj){
    this.canvas = obj.canvas || document.getElementById(obj.id)||null//canvas dom
    this.h_size = obj.h_size || 1 ;//画布尺寸
    this.w_size = obj.w_size || 1 ;//画布尺寸
    this.font_size=obj.font_size ||1
    this.size_val=100; 
    this.number = obj.number || 10 ;//设置显示多少个数据
    this.color = obj.color || '#123123'//线的颜色
    this.xy_color = obj.xy_color || '#999'//坐标轴的颜色
    this.min = obj.min || 0 //最大值和最小值
    this.max = obj.max || 300 //最大值和最小值
    this.xy_flag=obj.xy_flag || false //是否显示纵横坐标
    this.val_flag=obj.val_flag || false //是否显示值
    this.name_flag=obj.name_flag || false //是否显示x轴名称
    this.arr=[] //临时变量
    for(let i=0;i<this.number;i++){this.arr.push({'x_name':'空','y_val':0})}
    this.start_temp_val=0;
    this.now_arr_idx=0;
    let _this=this;
    //绘制折线
    this.write_line=function(val={'x_name':'18:33:33','y_val':50}){
      _this.ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);  // 清除上一次的绘制内容  
      if (_this.start_temp_val<_this.number){_this.arr[_this.start_temp_val]=val;_this.start_temp_val++;}
      else{_this.arr[_this.now_arr_idx]=val;
        // console.log('当前替换idx',_this.now_arr_idx);
        _this.start_temp_val++;}
      _this.ctx.beginPath();
      
      _this.ctx.lineWidth="1";
      let max_y=_this.size_val*_this.h_size;
      let max_x=_this.size_val*_this.w_size
      
      this.ctx.clearRect(0, 0, max_x, max_y);  // 清除上一次的绘制内容  
      if (_this.xy_flag==true){ //显示xy坐标轴
      _this.ctx.strokeStyle=_this.xy_color;
      _this.ctx.moveTo(3,3);//y顶点
      _this.ctx.lineTo(3,max_y);//xy原点
      _this.ctx.lineTo(max_x,max_y);//x顶点
      }
      //折线
      _this.ctx.strokeStyle=_this.color;
      let temp_flag=null
      let temp_h_size=_this.size_val*_this.h_size/_this.max
      let temp_w_size=_this.size_val*_this.w_size/(_this.number+2)
      for (let i=0;i< _this.arr.length;i++){
        let temp_idx=0;
        if (_this.start_temp_val>_this.number){temp_idx=(i+_this.now_arr_idx+1)%(_this.number)}
        else{temp_idx=(i+_this.now_arr_idx)%(_this.number)}
        
        // if (i==0){console.log('第一个显示的位置',temp_idx)}
        if (_this.arr[temp_idx]['y_val']==null)continue
        let x=temp_w_size*(1+i)
        let y=temp_h_size*_this.arr[temp_idx]['y_val']
        if (temp_flag==null){
       _this.ctx.moveTo(x,max_y-y);

       temp_flag=true
      }
       else{
        
      _this.ctx.lineTo(x,max_y-y);//xy原点
       }
       
    // 在指定位置y的值  
    if (_this.val_flag==true)_this.ctx.fillText(_this.arr[temp_idx]['y_val']+'', x, max_y-y-5*_this.font_size);
    // // 在指定位置x名称 
   if (_this.name_flag==true) _this.ctx.fillText(_this.arr[temp_idx]['x_name']+'', x,max_y);
      }
      _this.ctx.stroke();
      if (_this.start_temp_val>_this.number){_this.now_arr_idx++;}
      
      if (_this.now_arr_idx==_this.number)_this.now_arr_idx=0;
    }
    this.write_line2=function(data={'canvas':null,'val':{'x_name':'18:33:33','y_val':50}}){
      _this.canvas=data['canvas'];
      _this.canvas.height=100*this.h_size;
      _this.canvas.width=100*this.w_size;
      _this.ctx = _this.canvas.getContext("2d");  
      //设置边框样式为透明  
      _this.ctx.borderStyle = 'transparent';  
      // 设置背景颜色为透明  
      _this.ctx.fillStyle = 'transparent';  
      // 设置文本样式  
      _this.ctx.font = 5*_this.font_size+'px Arial';  
      _this.ctx.fillStyle = obj.fillStyle||'black';  
      _this.write_line(data['val'])
    }
  }  
Vue.component('show_lhp_line', {  
    name: 'ShowLhpLine',  
    template: `
  <div class='show_lhp_line_div'>
    <canvas class='show_lhp_line_canvas'></canvas>
</div>
`,  
  props:{var_name:null,_key:null},
  data(){  

    return {  
        data:{
            inputText:"",//初始化为空
        }
        ,
    }    

}, 
    methods: {  
    },  
    mounted: function () {  
        let _this=this
        this.data.canvas=this.$el.parentNode.querySelector('.show_lhp_line_canvas')
        if (_this.var_name!=null)
        {window[_this.var_name]=_this.data                                         //全局变量存放的对象  
 
    }
        
    }  
} 
);



Vue.component('show_lhp_text', {  
    name: 'ShowLhpText',  
    template: `
  <span class='show_lhp_text_div' style='white-space: nowrap;overflow: hidden;'>
    <span class='show_lhp_text_span'></span>
</span>
`,  
  props:{var_name:null,_key:null},
  data(){  

    return {  
        data:{
            inputText:"",//初始化为空
        }
        ,
    }    

}, 
    methods: {  
    },  
    mounted: function () {  
        let _this=this
        this.data.span=this.$el.parentNode.querySelector('.show_lhp_text_span')
        if (_this.var_name!=null)
        {window[_this.var_name]=_this.data                                         //全局变量存放的对象  
 
    }
        
    }  
} 
);


//父组件<div @bind_data='func' _key='0'>
//    表示input值改变就会运行func({key:_key,val:改变的值})

Vue.component('show_lhp_text_by_dict', 
{  
    name: 'ShowLhpTextByDict',  
    template: ` 
    <div  style='white-space: nowrap;overflow: hidden;'>
    <span>{{data.show_val}}</span>
    </div>

`,  
  props:{var_name:null,load_json:null,_key:null,num:null},
  data() 
    {  
    return {data:
        {
            show_val:'',
            val:'',
            dct:{},
        }
    }},
    watch:{
    'data.val':function(val){
    this.data.show_val=this.data.dct[val]
    }},
    methods: 
    {  
    },

    mounted: function () {  
        let _this=this

    if (_this.load_json){
        _this.data.dct=JSON.parse(_this.load_json);
        
    }  
    
    
    if (_this.var_name!=null)
    {window[_this.var_name]=_this.data  
    console.log(`组件已挂载！eee${_this.var_name}`);  
    }
}});


Vue.component('show_lhp_xtext', {  
    name: 'ShowLhpXtext',  
    template: `
  <span class='show_lhp_xtext_div'>
    <span class='show_lhp_xtext_span'></span>
</span>
`,  
  props:{var_name:null,_key:null},
  data(){  

    return {  
        data:{
            inputText:"",//初始化为空
        }
        ,
    }    

}, 
    methods: {  
    },  
    mounted: function () {  
        let _this=this
        this.data.span=this.$el.parentNode.querySelector('.show_lhp_xtext_span')
        if (_this.var_name!=null)
        {window[_this.var_name]=_this.data                                         //全局变量存放的对象  
 
    }
        
    }  
} 
);


//父组件<div @bind_data='func' _key='0'>
//    表示input值改变就会运行func({key:_key,val:改变的值})

Vue.component('lhp_search_text_lst_input', 
{  
    name: 'LhpSearchTextLstInput',  
    template: ` 
    <div>
    <div v-for="(item, index) in data.data" :key='index'>  
    <lhp_search_text_input  :ref="'lhp_search_text_input'+index" @bind_data='set_val' :_key='index'></lhp_search_text_input> 
    </div>
    </div>

`,  
  props:{var_name:null,load_url:null,load_json:null,db_name:null,_key:null,num:null},
  data() 
    {  
    return {data:
        {
            data:[0,2],
            lhp_search_dct:{},
            lhp_search_lst:[],
            val:[],
            datalist:[
                {id:'1',name:"热爱计算机"},
                {id:'2',name:"热爱数据结构"},
                {id:'3',name:"热爱生活"},
                {id:'4',name:"腾讯"},
                {id:'5',name:"大家好!Good morning!"},
                {id:'6',name:"oy is studying very hard"},
                {id:'7',name:"Tencent oye!"},
                {id:'8',name:"好好学习"},
                {id:'9',name:"好好吃饭"},
                {id:'10',name:"好好运动"},
                {id:'11',name:"好好做人"},
                {id:'12',name:"赶紧好好写AI方案"}],	//原始数据
            
        }}
    },

    methods: 
    {  
        lhp_search_text_input_init:function(){
            this.data.val=[];
            for (let i = 0; i < this.data.data.length; i++) {  
                this.data.val.push('')
            }
        },
        set_val:function(_data){
            this.data.val[_data['key']]=_data.val;
            this.$emit('bind_data', {key:this._key,val:this.data.val}); 
        },
        set_search_data:function(){
            for (let key in this.data.lhp_search_lst){
                this.data.lhp_search_lst[key]['datalist']=this.data.datalist
            }
        }
    },

    mounted: function () {  
        let _this=this
        if (_this.num!=null){_this.data.data=[];let num=parseInt(_this.num);for (let i =0;i<num;i++)_this.data.data.push(i)}
        _this.data.init=function(){_this.lhp_search_text_input_init();}
        _this.data.return_obj=function(index){
            return _this.$refs['lhp_search_text_input'+index][0].data
        }
        _this.data.set_val=function(data){
            if ( typeof data === 'string')data=JSON.parse(data);
            // console.log('dddd',data)
            _this.data.val=data;
            for (let i=0;i<_this.data.data.length;i++){
                let item=_this.data.return_obj(i);
                // console.log(item)
                item.set_val(data[i])
                // item.
            }
        }
        _this.data.clear_val=function(){
            for (let i=0;i<_this.data.data.length;i++){
                let item=_this.data.return_obj(i);
                item.set_val('')
                // item.
            }
        }               
        if (_this.var_name!=null){

            window[_this.var_name]=_this.data                                         //全局变量存放的对象          
            // console.log(`组件已挂载！${_this.var_name}`);  
        }
        _this.data.init()
        if (_this.load_url!=null){
        _this.data.get_data=request______({method:'post',url:_this.load_url});        //查找数据
        _this.data.get_all=function(body_data=null)                            //获取所有数据并显示
        {
            if (body_data==null)body_data={db_name:_this.db_name};
            // console.log('body',body_data)
            _this.data.get_data
            ({
                body_data:body_data,
                execute_lst://从服务器获取到数据后 要依次执行的操作(运行函数、变量赋值)
                [
                    {//2.修改tableData内容：浅拷贝
                        'type':'set_val',//相当于运行  window[var_name].tableData=data    //data指向的是服务器返回下来的数据received_data.data
                        'val1':[_this.data,'datalist'],//表示被浅拷贝赋值的变量 window[var_name].dada
                        'val2':'data' //data指向的是服务器返回下来的数据received_data.data
                    },
                    {'type':'func',func:_this.data.init},
                    {'type':'func',func:_this.set_search_data}
                ]
            })
        }   
        _this.data.get_all();
    }
        if (_this.load_json!=null){
            let temp_val=JSON.parse(_this.load_json)
        }
    }  
});

// 初始状态为隐藏的一个 弹窗 表单 vue组件
Vue.component('lhp_from1', {  
    template: `
<el-dialog  :title="data.title" :visible.sync="data.show_flag">

    <el-form style='height: 400px; overflow-y: scroll;'>
        <el-form-item  :label="item.名称" v-for="(item, key) in data.data" :key="key"   v-if="item['前端是否可以修改']" label-width="100px">
            
            <!-------------------普通文本输入    edit_lhp_text---------------------------------------------------->
            <edit_lhp_text :ref="'lhp_from1'+key" @bind_data='set_val' :_key='key' 
            v-if="check_val(item,'edit_lhp_text')"></edit_lhp_text>

            <!-------------------搜索列表选择器    edit_lhp_search_text2---------------------------------------------------->
            <edit_lhp_search_text_list :ref="'lhp_from1'+key" @bind_data='set_val' :_key='key' 
            :load_json="item['edit_lhp_search_text_list_load_json']"
            :load_url="item['edit_lhp_search_text_list_load_url']" :head_data="item['edit_lhp_search_text_list_head_data']"
            v-if="check_val(item,'edit_lhp_search_text_list')"></edit_lhp_search_text_list>

            <!-------------------字典选择器    edit_lhp_search_text2---------------------------------------------------->
            <edit_lhp_search_text2  :ref="'lhp_from1'+key" @bind_data='set_val' :_key='key' 
            :load_json="item['edit_lhp_search_text2']"
            v-if="check_val(item,'edit_lhp_search_text2')"></edit_lhp_search_text2>

            <!-------------------颜色选择器    edit_lhp_color---------------------------------------------------->
            <edit_lhp_color :ref="'lhp_from1'+key" @bind_data='set_val' :_key='key' 
            :text_选择颜色="item['edit_lhp_color']"
            v-if="check_val(item,'edit_lhp_color')"></edit_lhp_color>

            <!-------------------图片选择器    edit_lhp_color---------------------------------------------------->
            <edit_lhp_img :ref="'lhp_from1'+key" @bind_data='set_val' :_key='key' 
            v-if="check_val(item,'edit_lhp_img')"></edit_lhp_img>

        </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer" style='line-height: 0;'>
        <el-button @click="data.show_flag = false">{{config_data['取消']}}</el-button>
        <el-button type="primary" @click="ok">{{config_data['确定']}}</el-button>
    </div>

</el-dialog>
`,  
  props:{var_name:null,load_url:null,config_data:null,db_name:null,db_url:null},
  data() {  

    return {  
        data:{
            title:'表单',                //表单标题
            from:{},                    //表单数据存放对象
            show_flag:false,            //表单是否显示
            first_show:true,            //是否是第一次显示
            data:{                      //存储  表单显示可修改的数据格式
                    'name':{//数据库字段名称      
                            '前端是否可以修改':true,
                            "名称":'测试',
                            '前端修改类型':'lhp_search_text_input',
                            '前段修改类型的css':'width:200px;float: left;'
                            },
                },
            
        }
        ,
    }    

}, 
    methods: {  
        check_val:function(value,check_name){
            if (value[check_name]){return true}
            else{return false}
        },
        ok:function(){

            console.log('#######################表单按下确认#########################')
            for (let key in this.data.data){

                try{
                    res_dct=this.$refs['lhp_from1'+key][0].data.check_val()
                    if (res_dct.type==false){
                        let temp_val=this.data.data[key]['名称']+':'+res_dct.message
                        Vue.prototype.$alert(temp_val, this.config_data.输入数据格式异常, {
                            confirmButtonText: this.config_data.确定})
                        return null
                    }
                }
                catch{
    
                }}
            if (this.data.ok_func!=null)this.data.ok_func(this.data.from)
            this.data.show_flag=false;//关闭弹窗
        },
        lhp_input_init:function(){
            for (let key in this.data.data){
                let kkk='lhp_from1'+key;
                if (this.$refs[kkk]!=null)this.data['lhp_from1'+key]= this.$refs['lhp_from1'+key];
            }
        },
        set_val:function(_data){
            console.log('bind_data',_data)
            if (!(typeof _data.val === 'string')){_data.val=JSON.stringify(_data.val)}
            this.data.from[_data.key]=_data.val;
        },
        temp_set_val:function(){
            this.data.set_val(this.data.temp_set_val_data)
        },
        check_refs_empty(){
            //判断refs是否为空  不为空返回true
            if (Object.keys(this.$refs).length > 0) {  
                return true
              } else {  
              return null
              }
        },
        init_val:function(){
            
            for (let key in this.data.data){
                console.log('lhp_from1'+key,this.$refs['lhp_from1'+key])
                try{this.$refs['lhp_from1'+key][0].data.init()}
                catch{
    
                }}
            
        },
    },  
    watch:{//监听输入框的变化
        'data.show_flag':function(show_flag){
            if (this.data.first_show==true){
                //解决有时候显示
                this.data.first_show=false;
                if (this.data.temp_set_val_data!=null){
                    //尝试50次  每次50毫秒，根据check_refs_empty
                    ttime2(this.check_refs_empty,this.temp_set_val)
                }
            }
            if (show_flag==true){
                //重新加载
                setTimeout(this.init_val,1000)
            }
        },
        'data.data':function(data){
            
        }
    },
    mounted: function () {  
        let _this=this
        if (_this.config_data==null){
            _this.config_data={
                确定:'确定',
                输入数据格式异常:'输入数据格式异常',
                '取 消':'取 消',
                '确 定':'确 定',
                '表单':'表单',
            }
        }
        _this.data.search_text
        _this.data.init=function(){_this.lhp_input_init();console.log('now init')}
        _this.data.clear_from=function(){_this.data.from={}};  
        _this.data.ok_func=function (){console.log('button ok')},
        _this.data.get_data=request______({method:'post',url:_this.load_url});        //查找数据
        _this.data.db_handle=request______({method:'post',url:_this.db_url});        //查找数据
        _this.data.db_handle=request______({method:'get',url:_this.db_url});        //查找数据
        _this.data.db_handle=request______({method:'put',url:_this.db_url});        //查找数据
        _this.data.db_handle=request______({method:'delete',url:_this.db_url});        //查找数据
        _this.data.$refs=function(){return _this.$refs};
        _this.data.return_obj=function(index){
            try{return _this.$refs['lhp_from1'+index][0].data}
            catch{return _this.$refs['lhp_from1'+index].data}
        }
        _this.data.set_val=function(data){
            _this.data.temp_set_val_data=data;
            for (let key in data){
                try{
                _this.data.return_obj(key).set_val(data[key])}catch{}
            }
        }
        _this.data.get_val=function(){
            return _this.data.from
        }
        _this.data.clear_val=function(data){
            for (let key in data){
                try{_this.data.return_obj(key).clear_val()}catch{}
            }
        }
        _this.data.get_all=function(body_data=null)                            //获取所有数据并显示
        {
            if (body_data==null)body_data={db_name:_this.db_name};
            _this.data.get_data
            ({
                body_data:body_data,
                execute_lst://从服务器获取到数据后 要依次执行的操作(运行函数、变量赋值)
                [
                    {//2.修改tableData内容：浅拷贝
                        'type':'set_val',//相当于运行  window[var_name].tableData=data    //data指向的是服务器返回下来的数据received_data.data
                        'val1':[_this.data,'data'],//表示被浅拷贝赋值的变量 window[var_name].dada
                        'val2':'data' //data指向的是服务器返回下来的数据received_data.data
                    },
                    {'type':'func',func:_this.init},
                    {'type':'func',func:_this.init_val,timesleep:2000}
                ]
            })
        }                   
        if (_this.var_name!=null){

            window[_this.var_name]=_this.data                                         //全局变量存放的对象          
            console.log(`组件已挂载！${_this.var_name}`);  
        }
        _this.data.init()
        _this.data.get_all();

    }  
} 
);
Vue.component('lhp_login1', {  
    template: `
<div>
<div class="lhp_login1_div1">
    <div class="lhp_login1_div2">
        <el-form :rules="data.rules" ref="data.loginForm" :model="data.loginForm" class="lhp_login1_from">
            <h3 class="loginTitle">
            {{config_data.欢迎登录}}
            </h3>
            <el-form-item prop="username">
                <el-input type="text" v-model="data.loginForm.username" :placeholder="config_data.请输入账号" >
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="data.loginForm.password" :placeholder="config_data.请输入密码" >
                </el-input>
            </el-form-item>

            <el-button type="primary" style="width:100%" @click="submitLogin">{{config_data.登录}}</el-button>
        </el-form>
    </div>
</div>
</div>
`,  
  props:{var_name:null,login_url:null,config_data:null,href_url:null,db_name:null,backgroundimg_path:null},
  data() {  

    return { 
        data:{
        captchaUrl: "",
        loginForm:{
            username:"zhang0",
            password:"zhang0",
            code:''
        },
        checked: true,
        rules:{
            username:[{required:true,message:"请输入账号",trigger:"blur"},{ min: 0, max: 14, message: '长度在 0 到 14 个字符', trigger: 'blur' }
            ],
            password:[{required:true,message:"请输入密码",trigger:"blur"},,{ min: 0,  message: '密码长度要大于0', trigger: 'blur' }],
        },
            
        }
        ,
    }    

}, 
    methods: {  
        submitLogin:function(){
            this.data.login()
    }},  
    watch:{//监听输入框的变化
    },
    mounted: function () {  
        let _this=this
        if (_this.config_data==null){
            _this.config_data={
                请输入用户名:'请输入用户名',
                请输入密码:'请输入密码',
                '长度在 0 到 14 个字符':'长度在 0 到 14 个字符',
                '密码长度要大于0':'密码长度要大于0',
                '请输入密码':'请输入密码',
                '请输入账号':'请输入账号',
                '欢迎登录':'欢迎登录',
                '登录':'登录',

            }
        }
        _this.data.rules={
            username:[{required:true,message:_this.config_data['请输入用户名'],trigger:"blur"},{ min: 0, max: 14, message: _this.config_data['长度在 0 到 14 个字符'], trigger: 'blur' }
            ],
            password:[{required:true,message:_this.config_data['请输入密码'],trigger:"blur"},{ min: 0,  message:_this.config_data['密码长度要大于0'] , trigger: 'blur' }],
        }

        let temp_dom=this.$el.getElementsByClassName('lhp_login1_div1')[0]
        temp_dom.style['background-image']=`url(${_this.backgroundimg_path})`
        temp_dom.style['background-size']=`cover`      //查找数据
        _this.data.login_post=request______({method:'post',url:_this.login_url}); 
_this.data.res=null
_this.data._login=function(){
    if(_this.data.res.login_type=='success'){
        request_val=JSON.stringify({'user_id':_this.data.res.user_data.id,'user_name':_this.data.res.user_data.name})
        cookie_write('request_val',request_val,30)
        Vue.prototype.$notify({type: 'success',message: 'login_success'})
    
        window.location.href=_this.href_url
    }else{
        Vue.prototype.$notify({type: 'error',message: _this.data.res.message})
    }
    
}
_this.data.login=function(body_data=null)                            //获取所有数据并显示
{
    if (body_data==null)body_data=_this.data.loginForm;
    _this.data.login_post
    ({
        body_data:body_data,
        execute_lst://从服务器获取到数据后 要依次执行的操作(运行函数、变量赋值)
        [
            {//2.修改tableData内容：浅拷贝
                'type':'set_val',//相当于运行  window[var_name].tableData=data    //data指向的是服务器返回下来的数据received_data.data
                'val1':[_this,'data.res'],//表示被浅拷贝赋值的变量 window[var_name].dada
                'val2':'received_data' //data指向的是服务器返回下来的数据received_data.data
            },
            {
                'type':'func','func':_this.data._login
            }
        ]
    })
}
    }  
} 
);Vue.component('lhp_table1', {  
    template: `
    <div>
    <div class='lhp_table1_body'style=''v-for="item in data.body_data">
      <button type="button"  @click="edit(item)"  style='top: 11px;left: 20px;position: relative;' class="el-button el-button--primary aaaaaa" >{{config_data.编辑}}</button>
      <button type="button"  @click="_delete(item)"  style='top: 11px;left: 20px;position: relative;' class="el-button el-button--primary aaaaaa"  >{{config_data.删除}}</button>
      <div class="lhp_table1_background">
      <p style="margin-top:190px"></p>
      <p class='lhp_table1_p'style='margin:0px'v-for="(value, key) in data.head_data">
      
      <!-------------------v-if控制是否需要显示这个字段 --------------------->
      <span v-if="show_head_val(value)"  class="lhp_table1_span">
      {{value.名称}}:
        
      <!-------------------是否显示数值 --------------------->
      <show_lhp_text v-if="check_val(value,'show_lhp_text')" :ref="'show_lhp_text'+ item['id']+'_'+key"></show_lhp_text>

      <!-------------------是否显示单位 --------------------->
      <show_lhp_xtext v-if="check_val(value,'show_lhp_xtext')" :ref="'show_lhp_xtext'+ item['id']+'_'+key"></show_lhp_xtext>
      
      <!-------------------是否显示折线图 --------------------->
      <show_lhp_line v-if="check_val(value,'show_lhp_line')" :ref="'show_lhp_line'+ item['id']+'_'+key"></show_lhp_line>
      
      
      <!-------------------是否字典对应值 --------------------->
      <show_lhp_number2text v-if="check_val(value,'show_lhp_number2text')" :ref="'show_lhp_number2text'+ item['id']+'_'+key"></show_lhp_number2text>
      </span>

      </p>
      </div>
    </div>
    </div>
`,
  props:{var_name:null,db_name:null,load_head_url:null,config_data:null,load_body_url:null,loop_load_data_flag:null},
  data() {return {data:{
        temp_datas:{},
        head_data:{
            'id': {'名称': '色彩库id','table_width':100,},
            'name': {'名称': '名称','table_width':100,},
            'code': {'名称': '代号','table_width':100,},
            'node': {'名称': '备注','table_width':100,},
            'a1': {'名称': '备注','table_width':100,},
            'a2': {'名称': '备注','table_width':100,},
            'a3': {'名称': '备注','table_width':100,},
            'a4': {'名称': '备注','table_width':100,},
            'a5': {'名称': '备注','table_width':100,},
            'a6': {'名称': '备注','table_width':100,}, 
        },
            body_data:[
                {'id':'1','name':'1','code':'1','node':'33','xuhao':'1','a1':'1','a2':'2','a3':'3','a4':'4','a5':'5','a6':'6'},
                {'id':'1','name':'1','code':'1','node':'33','xuhao':'1','a1':'1','a2':'2','a3':'3','a4':'4','a5':'5','a6':'6'},
                {'id':'1','name':'1','code':'1','node':'33','xuhao':'1','a1':'1','a2':'2','a3':'3','a4':'4','a5':'5','a6':'6'},
            ],

    }}} , 
    methods: {  
        show_head_val:function(value){
            if (value['前端是否显示'] == true){return true}
            else{return false}
        },
        show_body_val:function(value,show_type){
            if (value['前端修改类型']==show_type){return true}
            else{return false}
        },
        edit:function(data){
            if (this.data.edit_func !=null){this.data.edit_func(data)}
        },
        _delete:function(data){
            if (this.data.delete_func !=null){this.data.delete_func(data)}
        },
        check_val:function(value,check_name){
            if (value[check_name]){return true}
            else{return false}
        },
        check_refs_empty(){
            //判断refs是否为空  不为空返回true
            if (Object.keys(this.$refs).length > 0) {  
                // console.log('#########refs !=0',this.$refs)
                return true
              } else {  
              return null
              }},
        
    },  
    mounted: function () {  
        let _this=this
        if (_this.config_data==null){
            _this.config_data={
                此操作将删除该数据:'此操作将删除该数据, 是否继续?',
                已取消删除:'已取消删除',
                删除成功:'删除成功',
                提示:'提示',
                确定:'确定',
                取消:'取消',
                编辑:'编辑',
                删除:'删除',
                修改成功:'修改成功',
                添加成功: '添加成功'
            }
        }
        _this.data._init_val=function(){
            // console.log('#########this.$refs',_this.var_name,_this.$refs)
            for (let key in _this.data.head_data){
                value=_this.data.head_data[key]
            // 显示折线图  绘制折线图
                if (value['show_lhp_line']){
                    if ( _this.data.temp_datas['show_lhp_line']==null)_this.data.temp_datas['show_lhp_line']={}
                    for (let key2 in _this.data.body_data){
                        item2=_this.data.body_data[key2]
                        if (_this.data.temp_datas['show_lhp_line'][item2['id']]==null)_this.data.temp_datas['show_lhp_line'][item2['id']]={}
                        if (_this.data.temp_datas['show_lhp_line'][item2['id']][key]==null){
                            _this.data.temp_datas['show_lhp_line'][item2['id']][key]=new show_lhp_line_class(JSON.parse(value['show_lhp_line']))}
                        let temp_ref=_this.$refs['show_lhp_line'+item2['id']+'_'+key]
                        let temp_canvas=temp_ref[0].data['canvas']
                        _this.data.temp_datas['show_lhp_line'][item2['id']][key].write_line2({'canvas':temp_canvas,val:{'x_name':'18:33:33','y_val':item2[key]}})
                        
                    }
                // }
            }
            //显示文字 根据字典显示文字
            if (value['show_lhp_number2text']){
                if ( _this.data.temp_datas['show_lhp_number2text']==null)_this.data.temp_datas['show_lhp_number2text']={}
                for (let key2 in _this.data.body_data){
                    item2=_this.data.body_data[key2]

              if (_this.data.temp_datas['show_lhp_number2text'][key]==null)_this.data.temp_datas['show_lhp_number2text'][key]=JSON.parse(value['show_lhp_number2text'])
                let temp_ref=_this.$refs['show_lhp_number2text'+item2['id']+'_'+key]
                temp_ref[0].data['span'].textContent = _this.data.temp_datas['show_lhp_number2text'][key][item2[key]];  
            }
        }
        //显示数值 绘制数值
        if (value['show_lhp_text']){
            if ( _this.data.temp_datas['show_lhp_text']==null)_this.data.temp_datas['show_lhp_text']={}
            for (let key2 in _this.data.body_data){
                item2=_this.data.body_data[key2]

          if (_this.data.temp_datas['show_lhp_text'][key]==null)_this.data.temp_datas['show_lhp_text'][key]=JSON.parse(value['show_lhp_text'])
            let temp_ref=_this.$refs['show_lhp_text'+item2['id']+'_'+key]
        // console.log('name','show_lhp_text'+item2['id']+'_'+key)
            let val=_this.data.temp_datas['show_lhp_text'][key].val
            // console.log('val',val)
            if (val){
                //将item2[key]转为val位小数的值
               let show_val=keepTwoDecimalFull(item2[key],val)
            temp_ref[0].data['span'].textContent =show_val; 
         }
            else{
                temp_ref[0].data['span'].textContent =item2[key];
            }

        }}
        //显示单位
        if (value['show_lhp_xtext']){
            if ( _this.data.temp_datas['show_lhp_xtext']==null)_this.data.temp_datas['show_lhp_xtext']={}
            for (let key2 in _this.data.body_data){
                item2=_this.data.body_data[key2]
          if (_this.data.temp_datas['show_lhp_xtext'][key]==null){_this.data.temp_datas['show_lhp_xtext'][key]=value['show_lhp_xtext'];}
            
          let temp_ref=_this.$refs['show_lhp_xtext'+item2['id']+'_'+key]
                temp_ref[0].data['span'].textContent =_this.data.temp_datas['show_lhp_xtext'][key];

        }}
        }
        }
        _this.data.init_all=function(){
            ttime2(_this.check_refs_empty,_this.data._init_val)
    }
                                                        //全局变量的变量名
                                  //数据存放处
        _this.data.total=0;    
        _this.data.head_data_post=request______({method:'post',url:_this.load_head_url});      //新增数据
        
        _this.data.body_data_get=request______({method:'get',url:_this.load_body_url});        //查找数据
        
        _this.data.body_data_post=request______({method:'post',url:_this.load_body_url});      //新增数据
        _this.data.body_data_put=request______({method:'put',url:_this.load_body_url});        //修改数据
        _this.data.body_data_delete=request______({method:'delete',url:_this.load_body_url});  //删除数据
        _this.data.delete_func=function(data){
            _this.$confirm( _this.config_data.此操作将删除该数据,  _this.config_data.提示, {
                confirmButtonText: _this.config_data.确定,
                cancelButtonText:  _this.config_data.取消,
                type: 'warning'
              }).then(() => {
                _this.data.body_data_delete({
                    head_data:{condition_field:['id',data['id']]},
                    execute_lst://从服务器获取到数据后 要依次执行的操作(运行函数、变量赋值)
                    [
                        {'type':'func',func:_this.data.get_body_data,},
                        {type:'func',func:Vue.prototype.$notify,args_:[{type: 'success',message: _this.config_data.删除成功}]},
                    ]
        
                    
                })
                console.log('delete2')
              }).catch(() => {
                _this.$message({
                  type: 'info',
                  message: _this.config_data.已取消删除
                });          
              });
            }
        _this.data.edit_func=function(row){}
   
        _this.data.$refs=function(){return _this.$refs};
                     
        _this.data.get_head_data=function(body_data=null)                            //获取所有数据并显示
        {
            if (body_data==null)body_data={'db_name':_this.db_name};
            console.log('body',body_data)
            _this.data.head_data_post
            ({
                body_data:body_data,
                execute_lst://从服务器获取到数据后 要依次执行的操作(运行函数、变量赋值)
                [
                    {//2.修改tableData内容：浅拷贝
                        'type':'set_val',//相当于运行  window[var_name].tableData=data    //data指向的是服务器返回下来的数据received_data.data
                        'val1':[_this,'data.head_data'],//表示被浅拷贝赋值的变量 window[var_name].dada
                        'val2':'data' //data指向的是服务器返回下来的数据received_data.data
                    },
                    {
                        'type':'func','func':_this.data.get_body_data
                    }
                ]
            })
        }
         _this.data.get_body_data=function(head_data=null)                            //获取所有数据并显示
        {
            if (head_data==null)head_data={};
            _this.data.body_data_get
            ({
                head_data:head_data,

                execute_lst://从服务器获取到数据后 要依次执行的操作(运行函数、变量赋值)
                [
                    {//1.将服务器下传的数据添加序号
                        type:'func',//相当于运行 ____add_xuhao(data)                      //data指向的是服务器返回下来的数据received_data.data
                        func:____add_xuhao,//____add_xuhao是一个封装好的函数
                        args:['data']
                    },
                    {//2.修改tableData内容：浅拷贝
                        'type':'set_val',//相当于运行  window[var_name].tableData=data    //data指向的是服务器返回下来的数据received_data.data
                        'val1':[_this.data,'body_data'],//表示被浅拷贝赋值的变量 window[var_name].tableData
                        'val2':'data' //data指向的是服务器返回下来的数据received_data.data
                    },
                    {//3.修改total内容：浅拷贝
                    'type':'set_val',//相当于运行  window[var_name].total=count            //data指向的是服务器返回下来的数据received_data.count
                    'val1':[_this.data,'total'],//表示被浅拷贝赋值的变量 window[var_name].total
                    'val2':'count' //count指向的是服务器返回下来的数据received_data.count
                    },
                    {//4.初始化一些组建 如折线图需要临时存储数值
                    'type':'func',
                    'func':_this.data.init_all,
                    },
                ]
            })
        }
        
        _this.data.post_one=function(from_data=null)                           //添加数据
        {
            if (from_data==null)from_data={};
            _this.data.body_data_post
            ({
                body_data:{info:from_data},
                execute_lst://从服务器获取到数据后 要依次执行的操作(运行函数、变量赋值)
                [
                //1秒后刷新 lhp_table 的数据
                {type:'func',func:_this.data.get_body_data,timesleep:1000},
                //弹出 刷新成功 提示
                {type:'func',func:Vue.prototype.$notify,args_:[{type: 'success',message: _this.config_data.添加成功}]},
                ]
            })
        }        
        
        _this.data.edit_one=function(from_data=null)                           //添加数据
        {
            console.log('from_data',from_data)
            if (from_data==null)from_data={};
            _this.data.body_data_put
            ({
                body_data:{condition_field:['id',from_data.id],put_field_dct:from_data},
                execute_lst://从服务器获取到数据后 要依次执行的操作(运行函数、变量赋值)
                [
                    //1秒后刷新 lhp_table 的数据
                    {type:'func',func:_this.data.get_body_data,timesleep:1000},
                    //弹出 刷新成功 提示
                    {type:'func',func:Vue.prototype.$notify,args_:[{type: 'success',message:_this.config_data.修改成功}]},
                ]
            })
        } 
        _this.data.loop_func=function(){
            if (_this.loop_load_data_flag!=null){
                _this.data.get_body_data()
            }
        }
        lhp_loop_time_funcs[_this.var_name]={
            'time':2,//两秒执行一次
           'func':_this.data.loop_func
         }       
         _this.data.get_head_data()
         if (_this.var_name!=null){
             window[_this.var_name]=_this.data                                         //全局变量存放的对象          
             console.log(`组件已挂载！${_this.var_name}`);  
         }                                  
    }  
} 
);
window.lhp_table2_load={}
//elenemt ui 的table有时候会不加载 需要重新加载 刷新
window.lhp_table2_refresh_lab=function(){setTimeout(() => {
    for (let key in lhp_table2_load) {  try {lhp_table2_load[key]();  } catch (error) {  } }
}, 200);}
Vue.component('lhp_table2', {  
    name:'LhpTable2',
    template: `

<div class='lhp_table2_div'>
    <el-table ref='mytable' :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" height="100%" border
    class='lhp_table2_table'
    :data="data.body_data">
  
        <el-table-column fixed="left" prop="xuhao" width=100 :label="config_data.序号" key="xuhao"
        v-if="xuhao_flag == true"  ></el-table-column>

        
        <!-------------------v-if控制是否需要显示这个字段 --------------------->
        <el-table-column v-if="show_head_val(value)"v-for="(value, key) in data.head_data" class="eeee"
            :prop="key"
            :width="value.table_width"
            :label="value['名称']"
            :key="key"  ><template slot-scope="scope"><div slot="reference" >
            
<!-------------------是否显示数值 --------------------->
<show_lhp_text v-if="check_val(value,'show_lhp_text')" :ref="'show_lhp_text'+ scope.row['id']+'_'+key"></show_lhp_text>

<!-------------------显示字典对应值    show_lhp_text_by_dict---------------------------------------------------->
<show_lhp_text_by_dict v-if="check_val(value,'show_lhp_text_by_dict')" :ref="'show_lhp_text_by_dict'+ scope.row['id']+'_'+key" :load_json="value['show_lhp_text_by_dict']"></show_lhp_text_by_dict>

<!-------------------显示图片    show_lhp_img---------------------------------------------------->
<show_lhp_img v-if="check_val(value,'show_lhp_img')" :ref="'show_lhp_img'+ scope.row['id']+'_'+key" ></show_lhp_img>

<!-------------------显示颜色    show_lhp_color---------------------------------------------------->
<show_lhp_color v-if="check_val(value,'show_lhp_color')" :ref="'show_lhp_color'+ scope.row['id']+'_'+key"></show_lhp_color>




        </div></template></el-table-column>

        <el-tooltip class="item" effect="dark" v-model="data.deit_tooltip_flag":content="data.edit_tooltip_content"  placement="left">
            
        <el-table-column :label="config_data.操作"  width=180 fixed="right" v-if="control_flag == true">
            <template slot-scope="scope">
                <el-button  size="mini"   @click="edit(scope.$index, scope.row)" class="ecaiku_chakansecai_none">{{config_data.编辑}}</el-button>
                <el-button size="mini" type="danger" @click="_delete(scope.$index, scope.row)" class="ecaiku_chakansecai_none">{{config_data.删除}}</el-button>
            </template>
        </el-table-column>
        </el-tooltip>
    </el-table>


<!-------------------这是  页标(选择第几页 每页多少数据 跳转多少页) start--------------------->
    <div class="block" style="height:66px">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="data.pagination.current_page"
        :page-sizes="data.pagination.page_sizes"
        :page-size="data.pagination.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.pagination.total">
        </el-pagination>
    </div>

</div>
<!-------------------这是  页标(选择第几页 每页多少数据 跳转多少页) end--------------------->
`,
  props:{var_name:null,load_head_url:null,config_data:null,db_name:null,load_body_url:null,xuhao_flag:{default:true},control_flag:{default:true},loop_load_data_flag:null},
  data() {  

    return {  

        data:{
            temp_datas:{},
            edit_tooltip_content:'在此处进行数据的修改',
            edit_tooltip_flag:false,
            bianji_flag:false,
            pagination:{ //页码选择参数
                page_sizes:[20,50,100],//可以选择分分页  每页可以显示多少
                page_size:20,//当前可以每页显示多少数据
                total:2000,//总共有多少数据
                current_page:1,//当前第几页
              },
            head_data:{
            'id': {'名称': '色彩库id','table_width':100,},
            'name': {'名称': '名称','table_width':100,},
            'code': {'名称': '代号','table_width':100,},
            'node': {'名称': '备注','table_width':100,},
            'a1': {'名称': '备注','table_width':100,},
            'a2': {'名称': '备注','table_width':100,},
            'a3': {'名称': '备注','table_width':100,},
            'a4': {'名称': '备注','table_width':100,},
            'a5': {'名称': '备注','table_width':100,},
            'a6': {'名称': '备注','table_width':100,}, 
        },
            body_data:[
               ],

              changesize:function(val){console.log('当前每页显示',val,'条数据')},//修改每页数量触发函数
              changepage:function(val){console.log('当前切换为第',val,'页')},//切换页触发函数
            }
        }
     }

       
, 
    methods: {
        
        check_val:function(value,check_name){
            // console.log('#######checkval',value,check_name)
            if (value[check_name]){return true}
            else{return false}
        },
        show_head_val:function(value){
            if (value['前端是否显示'] == true){return true}
            else{return false}
        },
        show_body_val:function(value,show_type){
            if (value['前端修改类型']==show_type){return true}
            else{return false}
        },
        handleSizeChange:function(val){this.data.pagination.page_size=val;this.data.changesize(val);this.data.get_body_data()},
        handleCurrentChange:function(val){this.data.pagination.current_page=val;this.data.changepage(val);this.data.get_body_data()},
        edit:function(index,row){this.data.edit_func(row)},
        _delete:function(index,row){
            _this=this
            this.$confirm(_this.config_data.此操作将删除该数据, _this.config_data.提示, {
                confirmButtonText: _this.config_data.确定,
                cancelButtonText: _this.config_data.取消,
                type: 'warning'
              }).then(() => {
                // console.log('delete1')
                _this.data.body_data_delete({
                    head_data:{condition_field:['id',row['id']]},
                    execute_lst://从服务器获取到数据后 要依次执行的操作(运行函数、变量赋值)
                    [
                        {'type':'func',func:_this.data.get_body_data,},
                        {type:'func',func:Vue.prototype.$notify,args_:[{type: 'success',message:_this.config_data.删除成功}]},
                    ]
        
                    
                })
                // console.log('delete2')
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: _this.config_data.已取消删除
                });          
              });
            
        },
        clear_xuhao_control:function(){
            //清除序号和编辑框
            if (this.xuhao_flag==true){
                let dom=this.$el.getElementsByClassName('el-table__body-wrapper')[0].getElementsByClassName('el-table__row')[0].querySelectorAll('td');
                let div_dom=dom[0].querySelectorAll('div')[0];
                div_dom.innerHTML='';
            };
            if (this.control_flag==true){
                let dom=this.$el.getElementsByClassName('el-table__body-wrapper')[0].getElementsByClassName('el-table__row')[0].querySelectorAll('td');
                let div_dom=dom[dom.length-1].querySelectorAll('div')[0];
                div_dom.innerHTML='';
            }
        },
 
    check_refs_empty(){
        //判断refs是否为空  不为空返回true
        if (Object.keys(this.$refs).length > 0) {  
            // console.log('#########refs !=0',this.$refs)
            return true
          } else {  
          return null
          }},
    
},  
mounted: function () {  
    
    let _this=this
    _this.data.add_xuhao=function(data2=null,name='xuhao'){
        for (let i=0;i<data2.length;i++)
        data2[i][name]=i+1;
      }
    if (_this.config_data==null){
        _this.config_data={
            此操作将删除该数据:'此操作将删除该数据, 是否继续?',
            已取消删除:'已取消删除',
            删除成功:'删除成功',
            提示:'提示',
            确定:'确定',
            取消:'取消',
            编辑:'编辑',
            删除:'删除',
            修改成功:'修改成功',
            添加成功: '添加成功'
        }
    }
    _this.data._init_val=function(){
        console.log('#########table22222this.$refs',_this.var_name,_this.$refs)
        for (let key in _this.data.head_data){
            value=_this.data.head_data[key]
    //显示数值 绘制数值
    if (value['show_lhp_text']){
        if ( _this.data.temp_datas['show_lhp_text']==null)_this.data.temp_datas['show_lhp_text']={}
        for (let key2 in _this.data.body_data){
            item2=_this.data.body_data[key2]

      if (_this.data.temp_datas['show_lhp_text'][key]==null)_this.data.temp_datas['show_lhp_text'][key]=JSON.parse(value['show_lhp_text'])
        let temp_ref=_this.$refs['show_lhp_text'+item2['id']+'_'+key]
        let val=_this.data.temp_datas['show_lhp_text'][key].val
        if (val){
           let show_val=keepTwoDecimalFull(item2[key],val)
        temp_ref[0].data['span'].textContent =show_val; 
     }
        else{
            if (typeof item2[key] ==='string'){temp_ref[0].data['span'].textContent =item2[key]}
            else{temp_ref[0].data['span'].textContent =JSON.stringify(item2[key])}
        }

    }}



    //显示显示字典对应值show_lhp_text_by_dict
    if (value['show_lhp_text_by_dict']){
        for (let key2 in _this.data.body_data){
            item2=_this.data.body_data[key2]
            let temp_ref=_this.$refs['show_lhp_text_by_dict'+item2['id']+'_'+key]
            temp_ref[0].data.val=item2[key]
        }

    }

    //显示颜色
    if (value['show_lhp_color']){
        for (let key2 in _this.data.body_data){
            item2=_this.data.body_data[key2]
            let temp_ref=_this.$refs['show_lhp_color'+item2['id']+'_'+key]
            temp_ref[0].data.val=item2[key]
        }

    }
    
    //显示img
    if (value['show_lhp_img']){
        for (let key2 in _this.data.body_data){
            item2=_this.data.body_data[key2]
            let temp_ref=_this.$refs['show_lhp_img'+item2['id']+'_'+key]
            temp_ref[0].data.id=item2['id']
            temp_ref[0].data.val=item2[key]
        }

    }
    //显示单位
    if (value['show_lhp_xtext']){
        if ( _this.data.temp_datas['show_lhp_xtext']==null)_this.data.temp_datas['show_lhp_xtext']={}
        for (let key2 in _this.data.body_data){
            item2=_this.data.body_data[key2]
      if (_this.data.temp_datas['show_lhp_xtext'][key]==null){_this.data.temp_datas['show_lhp_xtext'][key]=value['show_lhp_xtext'];}
        
      let temp_ref=_this.$refs['show_lhp_xtext'+item2['id']+'_'+key]
            temp_ref[0].data['span'].textContent =_this.data.temp_datas['show_lhp_xtext'][key];

    }}
    }
    //重新布局
    
    setTimeout(function() {
        _this.data.dolayout()
        
    }, 500);
    
    }
    _this.data.init_all=function(){
        ttime2(_this.check_refs_empty,_this.data._init_val)
}
        _this.data.$el=_this.$el;
        _this.data.head_data_post=request______({method:'post',url:_this.load_head_url});      //新增数据
        
        _this.data.body_data_get=request______({method:'get',url:_this.load_body_url});        //查找数据
        
        _this.data.body_data_post=request______({method:'post',url:_this.load_body_url});      //新增数据
        _this.data.body_data_put=request______({method:'put',url:_this.load_body_url});        //修改数据
        _this.data.body_data_delete=request______({method:'delete',url:_this.load_body_url});  //删除数据
        _this.data.xuhao_flag=this.xuhao_flag;
        _this.data.edit_func=function(row){}
        _this.data.clear_xuhao_control=this.clear_xuhao_control;
        _this.data.dolayout=function(){_this.$refs.mytable.doLayout();  };//重新布局 有时候eltable加载完成会有异常 需要重新布局
        window.lhp_table2_load[_this.var_name]=_this.data.dolayout;
        _this.data.get_body_data_add_head_data=[]//添加额外head  [func1]  调用方式  head=func1(head)
        _this.data.get_body_data=function(head_data=null)                            //获取所有数据并显示
        {
            if (head_data==null)head_data={limit:[_this.data.pagination.current_page-1,_this.data.pagination.page_size]};
            else if(head_data.limit==null){head_data.limit=[_this.data.pagination.current_page-1,_this.data.pagination.page_size]}
            let temp_var=_this.data.get_body_data_add_head_data;
            for (let zzz=0;zzz<temp_var.length;zzz++)head_data=temp_var[zzz](head_data);
            _this.data.body_data_get
            ({
                head_data:head_data,
                execute_lst://从服务器获取到数据后 要依次执行的操作(运行函数、变量赋值)
                [
                    {//1.将服务器下传的数据添加序号
                        type:'func',//相当于运行 ____add_xuhao(data)                      //data指向的是服务器返回下来的数据received_data.data
                        func:_this.data.add_xuhao,//____add_xuhao是一个封装好的函数
                        args:['data']
                    },
                    {//2.修改tableData内容：浅拷贝
                        'type':'set_val',//相当于运行  window[var_name].tableData=data    //data指向的是服务器返回下来的数据received_data.data
                        'val1':[_this,'data.body_data'],//表示被浅拷贝赋值的变量 window[var_name].tableData
                        'val2':'data' //data指向的是服务器返回下来的数据received_data.data
                    },
                    {//3.修改total内容：浅拷贝
                    'type':'set_val',//相当于运行  window[var_name].total=count            //data指向的是服务器返回下来的数据received_data.count
                    'val1':[_this,'data.pagination.total'],//表示被浅拷贝赋值的变量 window[var_name].total
                    'val2':'count' //count指向的是服务器返回下来的数据received_data.count
                    },
                    {'type':'func',func:_this.data.init_all}
                ]
            })
        }

        _this.data.get_head_data=function(body_data=null)                            //获取所有数据并显示
        {
            if (body_data==null)body_data={db_name:_this.db_name};
            // console.log('body',body_data)
            _this.data.head_data_post
            ({
                body_data:body_data,
                execute_lst://从服务器获取到数据后 要依次执行的操作(运行函数、变量赋值)
                [
                    {//2.修改tableData内容：浅拷贝
                        'type':'set_val',//相当于运行  window[var_name].tableData=data    //data指向的是服务器返回下来的数据received_data.data
                        'val1':[_this,'data.head_data'],//表示被浅拷贝赋值的变量 window[var_name].dada
                        'val2':'data' //data指向的是服务器返回下来的数据received_data.data
                    },
                    {
                        'type':'func','func':_this.data.get_body_data
                    }
                ]
            })
        }


        _this.data.post_one=function(from_data=null)                           //添加数据
        {
            if (from_data==null)from_data={};
            _this.data.body_data_post
            ({
                body_data:{info:from_data},
                execute_lst://从服务器获取到数据后 要依次执行的操作(运行函数、变量赋值)
                [
                //1秒后刷新 lhp_table 的数据
                {type:'func',func:_this.data.get_body_data,timesleep:1000},
                //弹出 刷新成功 提示
                {type:'func',func:Vue.prototype.$notify,args_:[{type: 'success',message:_this.config_data.添加成功}]},
                ]
            })
        }                    
          
        _this.data.edit_one=function(from_data=null)                           //添加数据
        {
            // console.log('from_data',from_data)
            if (from_data==null)from_data={};
            _this.data.body_data_put
            ({
                body_data:{condition_field:['id',from_data.id],put_field_dct:from_data},
                execute_lst://从服务器获取到数据后 要依次执行的操作(运行函数、变量赋值)
                [
                    //1秒后刷新 lhp_table 的数据
                    {type:'func',func:_this.data.get_body_data,timesleep:1000},
                    //弹出 刷新成功 提示
                    {type:'func',func:Vue.prototype.$notify,args_:[{type: 'success',message: _this.config_data.修改成功}]},
                ]
            })
        } 

        if (_this.var_name!=null){
            window[_this.var_name]=_this.data                                         //全局变量存放的对象          
            console.log(`组件已挂载！${_this.var_name}`);  
        }              
        if (_this.load_head_url!=null){_this.data.get_head_data()}     
        console.log('组件已挂载！'+`${_this.var_name}_tableData`);  
    }  
} 
);
